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Avant-propos 

La collection Webmasters s'adresse aux personnes initiees au developpement de sites web 
qui souhaitent decouvrir et mettre en pratique les nouvelles technologies Internet. Sans 
negliger les aspects theoriques, nous donnons toujours priorite a la pratique arm que vous 
puissiez rapidement etre autonome. 

A travers les differents titres de cette collection vous decouvrirez les technologies qui font 
le web 2.0 et feront ce que certains nomment deja le web 3.0. 

Conventions typographiques 

Ann de faciliter la comprehension des techniques decrites, nous avons adopte les 
conventions typographiques suivantes : 

gras : menu, commande, boite de dialogue, bouton, onglet. 

italique : zone de texte, liste deroulante, case a cocher, bouton radio. 

Police baton : instruction, listing, texte a saisir. 

: dans les scripts, indique un retour a la ligne volontaire du aux contraintes de la 
mise en page. 




II s'agit conformations complementaires relatives au sujet traite. Propose conseils et trues pratiques. 



Mise en garde sur un point important a ne pas negliger. 
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Definition de Silverlight 

Microsoft Silverlight est une plateforme de developpement d' applications web de haute 
qualite (RIA : rich Internet application). 

Cette plateforme est basee sur la plateforme .NET, ce qui en fait la plateforme la plus 
rapide disponible sur Internet actuellement. 

Malgre leur developpement en .NET, les applications Silverlight sont portables. Autant 
sur Linux, Solaris, Windows et Mac Os que sur certains mobiles. 

Pour ce faire, le client web doit installer sur sa machine un sous-ensemble de la 
plateforme .NET : le plugin Silverlight. 

Ce sous-ensemble contient tout ce qui est necessaire au fonctionnement de petites 
applications. 

Les prerequis pourdebuter 

D'un point de vue technique, pour programmer des applications Silverlight, le minimum 
vital est : 

la plateforme .NET 3.5 ; 
l un exemplaire de Visual Studio 2008. (La version gratuite de Visual Studio C# 
Express suffit amplement.) ; 
le Service pack I pour Visual Studio 2008 ; 
les Silverlight Tools pour Visual Studio 2008. (SDK). 

Tous ces programmes sont disponibles en telechargement sur le site http://www.silverlight 
.net/GetStarted. 

II est pourtant conseille d'ajouter a cette liste : 
I une version de Expression Blend 2 ; 
a le Silverlight ToolKit de CodePlex. 

D'un point de vue des connaissances, il est utile d' avoir de notions relatives a : 
la programmation orientee objets ; 
le langage C# ; 
le langage XML. 
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Pour acceder a une approche de la programmation .NET grace a C#, reportez-vous 
a I'annexe 2, Introduction au C#. 

Presentation du Microsoft Framework .NET 

Le Framework .Net, ou plateforme .NET en francais, est un ensemble compose des 
elements suivants : 

une machine virtuelle capable d'executer un code intermediaire propre a la 
plateforme ; 

un ensemble de langages parmi lesquels C#, VB.NET, ASP.NET, PHP.NET, 
IronPython, IronRuby, etc. ; 

un ensemble de librairies fournissant un grand nombre d'API preprogrammees. 

La version actuelle de la plateforme est 3.5. Au debut, prevue pour la creation 
d' applications de bureautiques et de serveurs, cette plateforme s'est peu a peu developpee 
pour les sites web et les mobiles. 

De nombreux paradigmes de programmation accompagnent ce Framework. Le plus connu 
etant celui de la separation du code d'interface et du code de la logique applicative. La 
majorite des langages implemented par la plateforme divise le code d'une application en 
deux fichiers separes. 

Ce paradigme permet principalement une meilleure collaboration entre programmeurs, 
designers et integrateurs. 

Parmi les librairies fournies, vous trouverez tout ce qui concerne les acces fichier, les 
protocoles de communication, la gestion des donnees, les connexions aux bases de 
donnees, etc. 

Chaque nouvelle version du Framework ajoute une couche d' abstraction qui rapproche le 
langage programme du langage humain. 

Ainsi la version 3.5 a ajoute les requetes LINQ permettant de simplifier grandement le 
maniement des donnees. 

La version 4, en beta actuellement, simplifiera principalement 1' acces aux langages 
dynamiques. Entre autres, une librairie nommee DLR (Dynamic Langage Runtime) va 
permettre aux developpeurs de creer de nouveaux langages ou de migrer des langages 
existant sur la plateforme .NET. 
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Fonctionnement de Silverlight 

Pour faire tourner une application Silverlight dans le navigateur web d'un utilisateur, cet 
utilisateur doit prealablement installer un plugin. 

Ce plugin contient une machine virtuelle prete a interpreter le code XAML et certaines 
librairies de la plateforme .NET. 

Une fois installe, et lors de la visite d'une page HTML contenant un controle Silverlight, 
le plugin va en telecharger le contenu. 

Ce contenu est un fichier XAP. Un fichier XAP est un fichier ZIP contenant tout les 
documents necessaires au bon fonctionnement d'une application Silverlight. 

Ces documents sont principalement : 

les differents fichiers XAML, decrivant les interfaces de 1' application ; 
I les differents fichiers C# (ou autre langage) decrivant la logique applicative ; 
les eventuels medias (images, videos, musique, polices de caracteres) ; 
des librairies .NET non presentes dans le plugin Silverlight de base. 

L' application va ensuite etre executee dans une zone memoire de l'ordinateur client. Cette 
zone est une zone securisee du nom de SandBox (bac a sable). 

Le bac a sable empeche 1' application Silverlight de nuire a la machine hote. Par exemple, 
en limitant l'acces aux fichiers. 

Une application Silverlight garde tout de meme la possibilite d'ecrire et de lire des 
fichiers sur l'ordinateur de 1' utilisateur. Cependant, cette fonctionnalite est limitee en 
taille et demande 1' approbation prealable de l'utilisateur. 

Ce meme principe s'applique, par exemple, aux acces aux services web. 

La version 1.0 de Silverlight permettait l'utilisation : 

des graphique 2D ; 
d' animations ; 
de media ; 

d'un code JavaScript comme code applicatif. 

La version 1.1 a permis l'utilisation de code C# ainsi que de quelques autres langages du 
Framework. 
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La version 2.0, derniere en date, presentee dans ce livre, a ajoute de nombreuses 
simplifications dans l'ecriture du code XAML, de nouveaux contrdles utilisateur et une 
version encore plus rapide du runtime. 



Prise en main de Visual Studio 2008 

Visual Studio est une application vous aidant a developper. Elle gere des solutions. Une 
solution est un ensemble de projets travaillant en parallele pour resoudre un probleme 
donne. 

Lors du premier demarrage de Visual Studio, le programme vous demande quel type de 
profil vous souhaitez utiliser. 

Ce livre est concu sous le profil Visual C# Developper. Prenez en compte le fait que les 
raccourcis clavier ainsi que le formatage du texte peuvent changer en fonction du profil 
choisi. 



□ Page de demarrage - Microsoft Visual Studio 



Fichier Edition Affichage Donne e;. Outils Test Analyser Fenetre 

.J- 



Page de demarrage 



<^ Microsoft' 

T * Visual Studi 



^Filmotheque 
■ Booloolution 
_3J SilverlightBanner 



Explorateur de solution: 



a 



Ouvrir : Projet.. , 

Creer : Projet.., 




Nouveautes de Visual C# 

Creer votre premiere application 

Comment fare... ? 

Apprendre Visual <~_# 

Tejecharger du contenu supplement aire 

Fiji urns M5DM 

Centre de developpement Visual C# 
Etendre Visual Studio 



PrSt 




Fig. 1 : Ecran de demarrage de Visual Studio 
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Le premier ecran ouvert dans Visual Studio est la page de demarrage. Cette page vous 
donne un acces rapide aux dernieres solutions ouvertes, aux actions de creation et 
d'ouverture d'autres solutions ainsi qu'au dernier post interessant du Web. 

La partie en haut se nomme la barre de menu, la partie placee a l'extremite droite contient 
deux outils : V Explorateur de solution et I'Editeur de proprietes. 

Si ces outils ne sont pas visibles sous votre configuration actuelle de Visual Studio, vous 
pouvez les activer via le menu Affichage de la Barre de menu. 



□ Page de demarrage - Microsoft Visual Studio 



Fichier Edition 




Affichage | Donnees Outils Test Analyser 



Explorateur de serveurs Ctrl+W, L 



^ Explorateur de solutions Ctrl+W, S 



3 


Affichage de classes 


Ctrl+W, C 




Fenetre Definition de code 


Ctrl+W, D 




Explorateur d'obiets 


Ctrl+W, J 




Liste d'erreurs 


Ctrl+W, E 


1 


Sortie 


Ctrl+W, 0 


3" 


Fenetre Proprietes 


Ctrl+W, P 


2 


Liste des taches 


Ctrl+W, T 




Bolte a outils 


Ctrl+W, X 




P p'li iltflhs Hp Ip rprhprrhp 





Fig. 2 : 

Menu Affichage 



Creer une nouvelle solution Silverlight 

Pour creer une nouvelle application Silverlight : 
1 Sous le menu Fichier, ouvrez le sous-menu Nouveau et choisissez Taction Projet. 













vgPage de demarrage - Microsoft Visual Studio 




Fichier Edition Affichage Donnees Outils 


Test 


Analy_ser Fenetre ? 




Nouveau 


D 


I« 


Projet... Ctrl+Maj+fJ 






Ouvrir 




a 


Site Web... Maj+Alt+N 






Fermer 




j 


Fichier... Ctrl+N 




si 


Fermer la solution 






Projet a partir de code existant... 










_li 





Fig. 3 : Nouveau Projet 

2 Dans la boite de dialogue qui s'affiche, naviguez vers le type de projet Visual C# — > 
Silverlight. 
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J?jxjl 


Types de projets ; 


Modeles ; 


| .NET Framework 3,5 





B Visual C# 

Windows 
Web 

Smart Device 
I S Office 

Base de donnees 

Reporting 

Silverlight 

Test 

WCF 

Workflow 
Ifi Projets de base de donnees 
+1 Autres la ng ages 

System es distribues 
Bj" Autres types de projets 



Modeles Visual Studio installes 

■£ Application Silverlight 
Mes modeles 

.j^Rechercher des modeles en ligne., 



3 Bibliotheque de classes Silverlight 



|Projet de creation d 'application Silverlight qui utilise .Net pour offrir des experiences Web enrichissantes (,NET Framework J. 5) 
Nom : | NomDeLApplication| 



Emplacement : | C:\Documents and Settirig5i,Adri-iinistr.ator'iDesktop\Book 
Nom de solution : | NomDeL Application 



■y | Parcourir... | 



Creer le repertoire pour la solution 



Annuler 



Fig. 4 : BoTte de dialogue Nouveau projet 

Selectionnez le modele Application Silverlight. 
4 Donnez un nom a votre application et cliquez sur OK. 



application Silverlight 



_?]x] 



Pour executer une application, ceHe*d do! etre hebergee dans une page Web 
HTML, Comment voulez-vous heberger I'application Silverlight ? 



Aiouter un rauveau pioiet Vv'eb AbP.NET a la solution pout heberaei 
Silverlight 



P Generer automat que ment une page de test pour heberger Silverlight a 
moment de la generation 



C Ljer ce controle Silverlight a un site Web existant 



Options 

Type de p_rojet ; 
Nom; 



| Projet d' application Web A5P.NET 



|NomDeLApplication,Web 




Fig. 5 : 

BoTte de dialogue type 
de debogage 



5 Une nouvelle boite de dialogue s'ouvre. Elle vous demande si vous desirez generer 
un projet contenant un site web pour heberger votre application Silverlight 
immediatement ou si vous preferez que Visual Studio se charge de cette tache a 
chaque demarrage d'une session de debogage de votre application. 

Ajoutez un nouveau projet ASP.NET a la solution pour heberger Silverlight. 
Votre solution est creee et contient deja de nombreux fichiers. 
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Explorateur de solutions - NornOeLApplicatio... » 1 



^ Solution 'NornDeLApplication' (2 projets) 
E (j3 NornDeLApplication 

El- giJ Properties 

+i ^ References 

El- f*] App.xaml 

+■ ■ Page, ■■■ami 



NomDeLApplication.Web 



Properties 

References 

App_Data 
_J ClientBin 

Default. aspx 
■I NomDeLApplicationTestPage.aspx 
^] NomDeLApplicationTestPage.html 
U Silverlight.js 
jj Web.config 



Fig. 6 : 

Arborescence de la solution 



Les trois seuls fichiers qui nous importent pour le moment sont : 

Page.xaml contenant la definition de 1' interface de votre application ; 
Page.xaml.es qui detient la definition du code application de votre application ; 
■ NomDeLApplicationTestPage.aspx, page ASP.NET note de votre SilverLight. 

Ajouter un nouveau fichier au projet 

Pour ajouter un nouveau fichier a un projet sous Visual Studio : 

1 Cliquez du bouton droit sur le nom du projet dans l'Explorateur de la solution. 
Cliquez sur le menu Ajouter/Nouvel element. 



Explorateur de solutions - NornDeLApplication » ■ 



Bl 

J^] Solution 'NornDeLApplication' (2 projets) 



□ 

jjj Element existant,, 
j Nouveau dossier 



Ajouter une reference.,, 

Ajouter une reference de service, , 



Generer 




Regenerer 




Nettoyer 




Executer I'analyse du code 




Afficher dans le navigateur 




Calculer la rnetrique du code 


Dependances du projet. . . 




Ordre de la generation du projet. . . 





Fig. 7 : 

Ajouter un nouvel 
element d un projet 
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Compiler unprojet 



1 Pour deboguer un projet Silverlight, cliquez sur le bouton Play situe dans la barre 
d'outils juste au-dessous de la Barre de menu (ou appuyez sur (F5p . 



Donnees Outils Test Analyst 

_' > Debug 



ixplorateur de solutions - NomDeLApf 



► Fig. 8 : 

Bouton Deboguer 



Apres compilation reussie, votre projet sera lance dans une page Internet Explorer. Si une 
erreur survient, la liste d'erreurs presente en bas de Visual Studio vous en informera. 



n NoniDcl. Application - Microsoft Visual Studio 



Fichier Edition Affichage Projet Generer Deboguer Donnees Outils Test Analyser Fenetre 



■ * «s . " _l ■« iJ ^» <i2 > 




Debug 



Explor ateur de solutions - NomDeLApplication - 1 



@. i j> u i h m 



Solution 'NomDeLApplication' (2 projets) 
B {jH NomDeLApplication 
H i^J Properties 
|i] ja| References 
+ - App.xaml 
H Page.xaml 
J NomDeLApplication.Web 
+1 Properties 
EE References 
App_Data 
_J ClientBin 
+] _^2J Default, aspx 

I NurfiDeLAppiicatioriTestPage.aspx 
*\ NomDeLApplicationTestPage.html 

Silverlight. ]s 
jj Web.config 



I Colonne I Projet 



£j 1 Grid does not support text Page.xaml 
content. [Line: 15 Position: 11] 



NomDeLApplication 



j$ Liste d'erreurs 



Fig. 9 : Liste d'erreur. 
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Lors de la premiere execution de votre application, il est probable que vous trouviez la 
boite de dialogue Debogage non active. 

Fig. 10: 

Debogage non active 



Debogage non active 



La page ne peut pas etre executee en mode debogage, car le debogage n'est pas active 
dans le fichier Web.config, Que voulez-vous faire ? 



''* j Modifier le fichier Web.config pour activer le debogage. 



j Le debogage doit etre desactive dans le fichier Web.config avant le 
deploiement du site Web dans un environnement de production. 



C Executer sans debogage. (Equivaut a Ctrl+F5) 



OK 


Annuler | 







2 Choisissez 1' option Modifier le fichier Web.config pour activer le debogage et cliquez 
sur OK sans vous en soucier davantage. 



Ma premiere application Silverlight : HelloWorld 

Quoi de plus beau qu'un HelloWorld ! 

1 Apres avoir cree une solution Visual Studio 2008 contenant un projet Silverlight et 
un projet ASP.NET destines aux tests, ouvrez le fichier Page.xaml. 



&q Page.xaml 

<UserControl x: Class="HelloWorld. Page" 

xmlns="http : / / schema s . microsoft . com/winf x/2006/ xaml /presentation" 
xmlns : x="http : / / schemas . microsoft . com/winf x/ 200 6 /xaml " 
Width="400" Height="300"> 

<Grid x : Name="LayoutRoot " Background="White"> 

</Grid> 
</UserControl> 

Du code y est deja present, il s'agit de code XAML, nous etudierons ce langage en details 
aux chapitres 2 et 5. 
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3 En attendant, ajoutez simplement quelques lignes de code : 



Page.xaml transformee en HelloWorld 



<UserControl x: Class="HelloWorld. Page" 

xmlns="http : / / schema s .microsoft . com/ win fx/ 200 6/ xaml /pre sen tat ion" 
xmlns : x="http : / / schemas .microsoft . com/winf x/2 00 6 /xaml" 
Width="400" Height="300"> 

<Grid x : Name="LayoutRoot " Background="White"> 

<TextBlock Text="HelloWorld" FontFamily="Verena" 
FontSize="70" 

Horizon talAlignment=" Center " 
VerticalAlignment="Center"/> 

</Grid> 
</UserControl> 



Lancez 1' application. 



HelloWorld 



Fig. 1 1 : 

HelloWorld 



Presentation du contenu de ce livre 

Ce livre traite de Silverlight 2.0 et non des sujets connexes ; nous nous efforcerons de 
vous fournir le maximum d' informations pour satisfaire votre curiosite et votre 
comprehension. Cependant, impossible de resumer dans un seul livre la somme enorme 
des connaissances et des savoirs requis pour devenir un professionnel du developpement 
d' applications Silverlight. 

Notre voyage commencera par un degrossissement de la foret impenetrable que compose 
un fichier XAML. 

Une fois ce degrossissement termine, nous pourrons obtenir un court apercu de la suite 
Expression. Cette suite est un studio complet destine au design et a la creation artistique. 
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Nous etudierons ensuite differentes methodes d'acces aux donnees, quelle qu'en soit leur 
provenance. II sera alors temps de revenir sur nos bases de XAML pour en apprendre 
davantage. 

Pour finir, nous verrons comment integrer au mieux Silverlight au sein d'une application 
ASP.NET. 
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Le langage 
XAML 



Lors de la creation du Framework 3.0, Microsoft a mis 
un point d'honneur d simplifier I'interaction entre les 
developpeurs, les integrateurs et les designers lors du 
processus de developpement d'une application. 
XAML [Extensible Application Markup Language) est la cle 
de voute de cette simplification concernant Windows 
Presentation Foundation. 
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Le langage XAML 



1.1 Introduction 

L' interface d'une application y est definie, ou dessinee, sous la forme d'un arbre XML. On 
retrouve dans cette methode de developpement une approche tres proche de ce qui se fait 
depuis longtemps en ASP.NET, avec d'un cote le code HTML, agremente de controle 
ASP.NET, et de 1' autre, un code de logique applicative contenant la logique de 
F application. 

De nombreux outils tels que Expression Blend vous permettent de faire abstraction du 
XAML en vous proposant une interface interactive de definition de votre application. 

Cependant, en tant que developpeur, une bonne connaissance du XAML vous aidera 
souvent. En effet, certaines opportunites offertes par Silverlight sont bien plus 
dependantes du XAML que du code applicatif. Le binding en est un bon exemple. 

1.2 Les bases de XAML 
Heritage de XML 

Le langage XAML est base sur le langage XML. 

Cela lui donne deja de nombreuses bases : 

Un document contient toujours un unique element appele element racine. 
Un element est une suite de caracteres respectant une nomenclature precise. 
Un element peut contenir des attributs et/ou des elements enfants. 

Nomenclatures d'un element XML sans enfants : 

Le premier caractere d'un element est toujours <. 
Le nom de 1' element suit directement. 

Viennent ensuite les differents attributs sous la forme NomDeLattri but=« valeur ». 
Les derniers caracteres de l'element sont />. 

On obtient done: <Nom [Attri butl=« valeur » [Attri but2=« valeur » [...]]]/>. 

Lorsque l'element a des enfants, la suite de caracteres fermants /> est remplacee par 
>[enfants]</NomDeLel ement>. 
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Adaptation de XML 



En XAML, le nom de l'element est remplace par le nom de la classe du controle utilisateur 
qu'il represente. Ainsi, on peut ajouter un bouton a notre interface de la maniere 
suivante : 

<Button/> 

Ce bouton peut avoir des attributs, tels qu'une taille et un nom (ce qui permettra de le 
retrouver plus tard dans le code de la logique applicative). 

<Button Width="100" Name="Buttonl " /> 



En XAML, tout attribut peut etre transforme en enfant. Cette particularite nous sera tres 
utile pour declarer des attributs structures : 

<Button> 

<Button .Width>10 0</Button.Width> 
<Button . Name>Buttonl</Button . Name> 
</Button> 

Tout controle utilisateur est capable de contenir d'autres controles utilisateur. Ainsi, 
l'emploi le plus frequent du contenu d'un bouton est du texte : 

<Button Content="du texte"> 

<Button .Width>10 0</Button.Width> 
<Button . Name>Buttonl</Button . Name> 
</Button> 



Fig. 1.1 : 

Bouton contend nt du texte 



Mais il peut en etre autrement. Par exemple, voici un bouton contenant un autre bouton : 

<Button Width="100" Name="Buttonl "> 

<Button Width="80" Name="Button2 " Content="un autre btt"/> 
</Button> 

— | Fig. 1.2 : 

un autre btt | Bouton contend nt un autre bouton 

Attention, la majorite des controles utilisateur n'accepte qu'un enfant. II est done 
impossible d'ecrire directement : 
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<Button Width="10 0" 


Name="Buttonl"> 










<Button Width="i 


30" Name="Button2" 


Content="un 


autre 


btt" 


/> 


<Button Width="i 


30" Name="Button3" 


Content="un 


autre 


btt" 


/> 


</Button> 













Pour obtenir un resultat de ce genre, il est indispensable d'utiliser un des elements de 
Layout que nous verrons au chapitre 3, Creer vos applications avec Expression Studio. 

II existe trois types d'attributs differents : 

Le premier type se trouve partout ou presque, tels Width et Height qui permettent de 
defmir la taille d'un element d'interface. 

Le deuxieme type est un attribut qui se retrouve seulement dans un element. Un 
attribut du deuxieme type ne pourra jamais etre utilise dans un autre element. 
Le troisieme type d' attribut est plus subtil. Un attribut de ce type appartient a un 
element mais est utilise dans un autre. Un bon exemple est 1' attribut Top de 1' element 
Canvas : 

Attribut de troisieme type 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schema s .microsoft. com/ win f x/2 00 6 /XAML/ presentation" 
xmlns : x="http : / / schemas .microsoft . com/ win f x/2 00 6 /XAML" 
Width="400" Height="200"> 

<Canvas x:Name="LayoutRoot" Background="White"> 
<Button Canvas .Top="50"/> 

</ Canvas> 
</UserControl> 

1 .3 Les elements de structure 
Grid 

Lors de la creation de votre premiere application Silverlight, le premier element que vous 
rencontrez est une Grid. 

La Grid, grille en francais, fait partie des elements structurants (Dit de Layout) de votre 
application. 

En effet, si en WinForm les differents elements de vos applications etaient organises les 
uns par rapport aux autres majoritairement grace a leurs positions relatives, en XAML, des 
elements dits de Layout se chargent de cette organisation. Le plus commun de ces 
elements est la grille. 
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Une grille peut etre comparee a un tableau compose de lignes et de colonnes. Chaque 
element qu'elle contient doit lui specifier sa position. 

Le comportement de base d'une grille stipule qu'elle est composee d'une cellule unique. 
Cette cellule tentera de donner a son contenu la taille maximale possible : 

Comportement d'une Grid sans cellules 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : // schema s .microsoft. com/winf x/2 00 6/XAML/presentation" 
xmlns : x="http : / / schemas .microsoft . com/ winf x/2 00 6/XAML" 
Width="400" Height="300"> 

<Grid x : Name="LayoutRoot " Background="White"> 
<Button Content="Hello World"/> 

</Grid> 
</ User Con trol> 



Fig. 1.3: 

Comportement d'une 
Grid sans cellules 



II est pourtant possible de stipuler a une grille le nombre de colonnes qu'elle doit afficher. 
Sans autres informations, chaque colonne aura une taille egale aux autres. II est 
maintenant devenu indispensable, pour le bouton contenu dans la grille, de preciser sa 
position : 

Comportement d'une Grid avec ColumnDefinitions 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schemas .microsoft . com/winf x/2 00 6/XAML/ presentation" 
xmlns : x="http : / / schemas .microsoft . com/ winf x/2 00 6/XAML" 
Width="400" Height="300"> 

<Grid x : Name="LayoutRoot " Background="White"> 
<Grid . ColumnDef initions> 
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<ColumnDef inition/> 
<ColumnDef inition/> 
</ Grid. Col umnDefi nit ion s> 

<Button Grid.Column="l" Content="Hello World"/> 

</Grid> 
</ User Con trol> 



Ajouter des lignes a cette grille se fait de la meme maniere : 



► Fig. 1 .4 : 

Comportement d'une 
Grid avec 
ColumnDefinitions 




Comportement d'une Grid avec RowDefinitions 



<User Control x: Class="LearnXAML . Page" 

xmlns = "http : / / schema s .microsoft . com/ win f x/2 00 6 /XAML/ presentation" 
xmlns : x="http : //schemas .microsoft. com/winf x/2 00 6 /XAML" 
Width="400" Height="300"> 

<Grid x : Name="LayoutRoot" Background="White"> 
<Grid. Column Def initions> 

<ColumnDef inition/> 

<ColumnDef inition/> 
</Grid . ColumnDef initions> 
<Grid. RowDef initions> 

<RowDef inition/> 

<RowDef inition/> 
</Grid . RowDef initions> 

<Button Grid.Column="0" Grid.Row="l" Content="Hello World"/> 

</Grid> 
</UserControl> 
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► Fig. 1 .5 : 

Comportement d'une 
Grid avec 
RowDefinitions 



Hello World 



Trois options s'offrent a nous pour forcer les differentes lignes ou colonnes a adopter des 
tailles differentes : 

en leur donnant une taille en pixels (Wi dth= 100) ; 

en leur demandant de prendre la taille de leur contenu (Width=Auto) ; 

en leur allouant une partie de l'espace restant (Width=*). 



Variation de tailles sur les ColumnDefinitions et les RowDefinitions 



<UserControl x: Class="LearnXAML . Page" 




xmlns = "http : / / schema s .microsoft. com/winf x/2 00 6/XAML/ presentation" 


xmlns : x="http : / / schema s .microsoft. com/ win 


fx/2006/XAML" 


Width="400" Height="300"> 




<Grid x : Name="LayoutRoot " Background="White"> 


<Grid . ColumnDef initions> 




<ColumnDef inition Width=" 10 0 " /> 




<ColumnDef inition Width="Auto" /> 




<ColumnDef inition Width="*"/> 




<ColumnDef inition Width="2*"/> 




</Grid. ColumnDef initions> 




<Grid . RowDef inition s> 




<RowDef inition Height="100"/> 




<RowDef inition Height="Auto"/> 




<RowDef inition Height="*"/> 




<RowDef inition Height="2* "/> 




</ Grid. RowDef i nit ion s> 




<Button Grid.Column="0" Grid.Row="0" 


Content="0, 0"/> 


<Button Grid.Column="l" Grid.Row="0" 


Content="l, 0"/> 


<Button Grid.Column="2" Grid.Row="0" 


Content="2, 0"/> 


<Button Grid.Column="3" Grid.Row="0" 


Content="3, 0"/> 



29 



Le langage XAML 



<Button 


Grid 


Column= 


'0" 


Grid 


Row= 


ii ii 


Content=' 


'0,1" 


/> 


<Button 


Grid 


Column= 


■1" 


Grid 


Row= 


ii ii 


Content=' 


•1,1" 


/> 


<Button 


Grid 


Column= 


•2" 


Grid 


Row= 


ii ii 


Content=' 


'2,1" 


/> 


<Button 


Grid 


Column= 


'3" 


Grid 


Row= 


ii ii 


Content=' 


'3, 1" 


/> 


<Button 


Grid 


Column= 


' 0 " 


Grid 


Row= 


"2" 


Content=' 


'0,2" 


/> 


<Button 


Grid 


Column= 


■1" 


Grid 


Row= 


"2" 


Content=' 


'1,2" 


/> 


<Button 


Grid 


Column= 


'2" 


Grid 


Row= 


"2" 


Content=' 


'2,2" 


/> 


<Button 


Grid 


Column= 


'3" 


Grid 


Row= 


" 2 " 


Content=' 


'3,2" 


/> 


<Button 


Grid 


Column= 


' 0 " 


Grid 


Row= 


"3" 


Content=' 


'0,3" 


/> 


<Button 


Grid 


Column= 


■1" 


Grid 


Row= 


"3" 


Content=' 


'1,3" 


/> 


<Button 


Grid 


Column= 


'2" 


Grid 


Row= 


"3" 


Content=' 


'2,3" 


/> 


<Button 


Grid 


Column= 


'3" 


Grid 


Row= 


"3" 


Content=' 


'3, 3" 


/> 



</Grid> 
</UserControl> 



0,0 


1,0 


2,0 


3,0 


0,1 


1,1 


2,1 


3,1 










0,2 


1,2 


2,2 


3,2 


0,3 


1,3 


2,3 


3,3 



Fig. 1.6: 

Variation de failles sur les 
ColumnDefinitions et les 
RowDefinitions 



StackPanel 

Le deuxieme element de la famille des Layout est le StackPanel. Un StackPanel imbrique 
ses differents enfants les uns au-dessous des autres : 



StackPanel 

<User Control x: Class="LearnXAML . Page" 

xmlns="http : //schemas .microsoft. com/ winf x/2 00 6 /XAML/ presentation" 
xmlns : x="http : //schemas .microsoft. com/ winf x/2 00 6 /XAML" 
Width="400" Height="100"> 

<Grid x : Name="LayoutRoot" Background="White"> 
<StackPanel> 

<Button Content="Hello"/> 
<Button Content="World"/> 
<Button Content=" !!!"/> 
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</StackPanel> 
</Grid> 
</UserControl> 



World 



Fig. 1.7: 

StackPanel a orientation 
verticale 



Les elements fournis dans la plateforme Silverlight de base ne proposent pas de 
WrapPanel tel qu'on en trouve en WPF. II existe deux solutions pour pallier ce probleme : 

utiliser le Silverlight ToolKit de CodePlex que nous evoquerons plus tard ; 

Pour obtenir plus de renseignements sur le Silverlight Toolkit de CodePlex, 
reportez-vous au chapitre 5, Silverlight et ASP.NET. 

forcer un StackPanel a afficher ses enfants les uns a cote des autres. 



StackPanel d orientation horizontale 

<StackPanel Orientation="Horizontal"> 

<Button Content="Hello"/> 
<Button Content="World"/> 
<Button Content=" ! ! ! "/> 
</StackPanel> 



-iello 



World 



► Fig. 1.8: 

StackPanel a orientation 
horizontale 



Canvas 

Le dernier element de la famille des Layout presente dans ce livre est le Canvas. Son 
utilisation est la meme qu'a l'epoque des WinForm. En effet, le Canvas, contrairement 
aux autres Layout, delegue le positionnement de ses enfants a eux-memes. 

Ce positionnement est relatif a leurs distances par rapport au dessus et a la gauche du 
Canvas : 
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Canvas 



<UserControl x: Class="LearnXAML . Page" 

xmlns="http : //schemas .microsoft. com/ win f x/2 00 6 /XAML/ presentation" 
xmlns : x="http : //schemas .microsoft. com/ win f x/2 00 6 /XAML" 
Width="200" Height="200"> 

<Canvas x : Name="LayoutRoot" Background="White" > 

<Button Canvas .Top="0" Canvas . Left=" 0 " Content=" 0 , 0 "/> 
<Button Canvas .Top="100" Canvas . Left=" 10 0 " Content="Hello"/> 
<Button Canvas .Top="130" Canvas . Left=" 130 " Content="World"/> 
<Button Canvas .Top="160" Canvas . Left=" 1 60 " Content=" ! ! ! "/> 

</ Canvas> 
</ User Con trol> 



ScrollViewer 

Bien que le ScrollViewer ne soit pas a proprement parler un element de Layout, il permet 
tout de meme de structurer l'interface. 

C'est lui qui vous offre l'opportunite d'ajouter des ascenseurs a votre application, qu'ils 
soient horizontaux ou verticaux. 

Sans configuration, seul l'ascenseur vertical est visible : 

&q ScrollViewer sans configuration 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schemas .microsoft. com/ win f x/2 00 6 /XAML/ presentation" 
xmlns : x="http : / / schemas .microsoft . com/ win f x/2 00 6 /XAML" 
Width="200" Height="200"> 

<ScrollViewer x : Name="LayoutRoot" Background="White" > 
</ ScrollViewer> 
</ User Con trol> 



0,0 



Fig. 1.9: 

Exemple de Canvas 



Hello 



World 
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Fig. 1.10: 

ScrollViewer sans configuration 



Les attributs Hori zontal Scrol 1 BarVi si bi 1 i ty et Verti cal Scrol 1 BarVi si bi 1 i ty 
permettent de modifier cette configuration. lis acceptent 4 valeurs differentes : 

Auto : l'ascenseur est visible uniquement si le contenu du ScrollViewer depasse la 
taille du ScrollViewer. 

Disabled : l'ascenseur est visible mais inutilisable par l'utilisateur. 
Hidden : l'ascenseur est cache. 

Visible : l'ascenseur est toujours visible. Si la taille du contenu depasse la taille du 
ScrollViewer, l'ascenseur pourra etre employe par l'utilisateur. 

ScrollViewer avec configuration 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schema s .microsoft. com/winf x/2 00 6/XAML/ presentation" 
xmlns : x="http : / / schemas .microsoft . com/winf x/2 00 6/XAML" 
Width="200" Height="200"> 

<ScrollViewer x :Name="LayoutRoot" Background="White" 

HorizontalScrollBarVisibility="Auto" 

VerticalScrollBarVisibility="Auto"> 
</ ScrollViewer> 
</ User Con trol> 

Border 

Au meme titre que le ScrollViewer, l'element Border n'est pas un element de Layout. 
Cependant, son utilisation permet de rendre plus comprehensible la structure d'une 
interface pour l'utilisateur. 

Un Border est seulement une ligne qui entoure l'element qu'il contient. Ses differents 
attributs lui donnent une flexibilite incomparable et font de lui un atout majeur : 
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Differents exemples de Border 

<User Control x: Class="LearnXAML . Page" 

xmlns="http : //schemas .microsoft. com/ win f x/2 00 6 /XAML/ presentation" 
xmlns : x="http : //schemas .microsoft. com/ win f x/2 00 6 /XAML" 
Width="200" Height="200"> 

<StackPanel x : Name="LayoutRoot" Background="White"> 
<Border Margin="5"> 

<TextBlock Text="No Param Border" Margin="5"/> 
</Border> 

<Border Margin="5" 

BorderBrush="Black" 

BorderThickness="2"> 
<TextBlock Text="Simple Param Border" Margin="5"/> 
</Border> 

<Border Margin="5" 

B or derBrush=" Green" 

BorderThickness="2" 

CornerRadius=" 5"> 
<TextBlock Text="CornerRadius Border" Margin="5"/> 
</Border> 



<Border Margin="5" 

BorderBrush="Blue" 

BorderThickness="2 " 

CornerRadius = "0, 0, 50, 0"> 
<TextBlock Text="Complex ComerRadius Border" Margin="5"/> 
</Border> 



<Border Margin="5" 

BorderBrush= "Black" 
Background="Aqua"> 
<TextBlock Text="Border with Background" Margin="5"/> 
</Border> 
</StackPanel> 
</UserControl> 



No Param Border 



Simple Param Border 



ComerRadius Border 



Complex ComerRadius Bordeo 



Border with Background 



Fig. 1.11 : 

Differents exemples de Border 
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(j) Les attributs Margin et CornerRadius 

Remarquez I'uti lisation de I'attribut Margin. Ce dernier, de type 1 , est disponible dans la majorite des 
elements d'interfaces et permet de les espacer les uns des autres. Comme le CornerRadius dans sa 
version complexe, le Margin peut etre definit avec 4 valeurs (Top, Right, Bottom, Left). 



1 .4 Les elements de contenu 



Images 

L' element Image est enfantin a utiliser. Pour ajouter une image a votre application, il suffit 
d'en indiquer le chemin relatif par rapport au noeud racine de votre application ou d'en 
indiquer une URI absolue. 

Par exemple, pour afficher un fichier wipuslogo.jpg faisant partie de votre projet 
Silverlight : 

Fig. 1.12: 

Structure de la solution 



Solution 'BookSolution' (2 projects) 
("3 LearnXaml 
j ^ Properties 
ij US References 
il 2D App,xaml 
Ei 2D GridJtaml 

Grid .xaml.cs 
wipuslogojpg 



<^jt Image avec Source relative au projet 

<UserControl x: Class="LearnXAML . Page" 

xmlns="http : / / schema s .microsoft. com/winf x/2 00 6/XAML/presentation" 
xmlns : x="http : / / schemas .microsoft . com/winf x/2 00 6/XAML" 
Width="400" Height="200"> 

<Grid x : Name="LayoutRoot " Background="White"> 
<Image Source="wipuslogo . jpg" /> 

</Grid> 
</UserControl> 



Ou encore, afficher une image recuperee a partir d'un site web 

Fig. 1.13: 

Image avec source 
relative au projet 
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fl^ Image avec Source absolue (URI) 

<User Control x: Class="LearnXAML . Page" 

xmlns="http : //schemas .microsoft. com/ win f x/2 00 6 /XAML/ presentation" 
xmlns : x="http : //schemas .microsoft. com/ win f x/2 00 6 /XAML" 
Width="400" Height="200"> 

<Grid x :Name="LayoutRoot" Background="White"> 

<Image Source="http : //www . wipus . com/WipusCloud. jpg" /> 

</Grid> 
</UserControl> 




Un des attributs les plus importants de l'element Image est l'attribut Stretch. II permet 
de definir comment l'element va interagir avec l'image pour l'afficher, s'il va la 
redimensionner, la couper, en conserver les proportions d'origine ou non. 



TextBlock 

Le TextBlock est la zone de texte la plus communement utilisee. Elle permet de choisir 
toutes les caracteristiques habituelles d'un texte, de sa famille a sa taille, en passant par 
sa couleur : 



<^jt TextBlock 

<User Control x : Class="LearnXAML . Page" 

xmlns = "http : //schemas .microsoft . com/ win f x/2 00 6 /XAML/ present at ion" 
xmlns : x="http : //schemas .microsoft. com/ win f x/2 00 6 /XAML" 
Width="200" Height="200"> 

<StackPanel x : Name="LayoutRoot" Background="White"> 
<TextBlock Text="texte blablabla" 
TextAl ignment=" Center " 
TextWrapping="NoWrap" 
FontFamily="Arial" 
FontSize="24" 
FontStyle=" Italic" 
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<TextBlock 



<TextBlock 



</StackPanel> 
</ User Con trol> 



FontWeight="Bold" 
For eground=" Blue" /> 
Text="texte 2" 
TextAlignment="Lef t" 
TextWrapping="NoWrap" 
FontFamily="Verena" 
FontSize="13" 
FontWeight="Bold" 
Foreground=" Red" /> 
Text="texte 3" 
TextAlignment= "Right" 
TextWrapping="NoWrap" 
FontFamily="Verena" 
FontSize="17" 
FontWeight="Bold" 
Foreground="Magenta"/> 



fexfe blablabla 

texte 2 

texte 3 



Fig. 1.15: 

Exemple de TextBlocks 



Remarquez l'attribut TextWrappi ng. II permet de passer automatiquement a la ligne 
lorsque sa valeur est Wrap. Le cas echeant, si la longueur du texte depasse la taille du 
TextBlock, le surplus sera coupe. 



ProgressBar 

Comme son nom l'indique, la ProgressBar sert a indiquer l'etat d'une progression, il 
s'agit de la meme ProgressBar que celle utilisee par Windows lors d'une copie. Son 
attribut Value indique l'etat actuel de la progression qui peut varier de Minimum a 
Maximum : 



^£ ProgressBar 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : // schema s .microsoft. com/winf x/2 00 6/XAML/presentation" 
xmlns : x="http : //schemas .microsoft. com/winf x/2 00 6/XAML" 
Width="300" Height="30"> 
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<StackPanel x 


Name="LayoutRoot" Background="White"> 


<ProgressI 


5ar Name="ProgressBarl " 




Height="30" 




Maximum="100" 




Value="40" 




Minimum="0 " 




Foreground 3 "Green" 




/> 


</StackPanel> 




</UserControl> 





Fig. 1.16: 

ProgressBar 



1 .5 Les evenements et leur traitement 

Avant de continuer, il est important de comprendre comment fonctionne le traitement des 
evenements en Silverlight, comment interagir entre le code XAML et le code C# de 
F application. 

Des qu'un element, tel qu'un bouton, est ajoute au code XAML, et pour peu que cet 
element contienne un attribut Name, il devient accessible dans le code C#. 

Ainsi pour atteindre le bouton de Name Buttonl dans le code C# d'une application, il 
suffit d'ecrire son nom. Tout attribut en XAML devient alors une propriete en C# : 

*fc Code XAML 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schema s .microsoft. com/ win f x/2 00 6 /XAML/ presentation" 
xmlns : x="http : / / schemas .microsoft . com/ win f x/2 00 6 /XAML" 
Width="300" Height="30"> 

<Grid x :Name="LayoutRoot" Background="White"> 

<Button Name="Bouttonl" Content="un boutton"/> 
</Grid> 
</UserControl> 

Code C# 

using System; 

using System. Collections. Generic; 
using System. Linq; 
using System. Net; 
using System. Windows ; 
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using System. Windows . Controls ; 

using System. Windows . Documents ; 

using System. Windows . Input; 

using System. Windows .Media; 

using System. Windows .Media .Animation; 

using System. Windows . Shapes ; 

namespace LearnXAML 
{ 

public partial class Page : UserControl 
{ 

public Page ( ) 
{ 

InitializeComponent ( ) ; 

string temp = "" + Bouttonl . Content; 

} 

} 

} 

Pour ajouter l'evenement Clic sur ce bouton, indiquez-le comme attribut dans le code 
XAML et ajoutez la fonction relative dans le code C#. Generalement, cette operation est 
automatique : 

Modification du code XAML 

<Button Name="Bouttonl" Content="un boutton" Clic="Bouttonl_Clic"/> 

Modification du code C# 

using ... 

namespace LearnXAML 
{ 

public partial class Page : UserControl 
{ 

public Page ( ) 
{...} 

private void Bouttonl Clic (object sender, RoutedEventArgs e) 
{ 

Bouttonl . Content = "Merci"; 

} 

} 
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Fig. 1.17: Evenement Clic sur bouton 

Les evenements relatifs aux entrees utilisateur sont partages par la majorite des elements 
d' interface. 

Ainsi MouseEnter, MouseMove, MouseLeftButtonDown, MouseLeftButtonUp, MouseLeave, 
KeyUp et KeyDown se retrouvent presque partout. 

(J) Absence de clic droit en Silverlight 

En Silverlight, il n'y a pas d'evenements lies au clic droit de la souris. 

1.6 Les elements d'interactions 
Button 

Le bouton est l'element d'interaction par excellence que nous avons deja largement 
utilise. 

Voici, pour rappel, son fonctionnement : 

Code XAML d'un bouton 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schema s .microsoft. com/ win f x/2 00 6 /XAML/ presentation" 
xmlns : x="http : / / schemas .microsoft . com/ win f x/2 00 6 /XAML" 
Width="100" Height="30"> 

<Grid x :Name="LayoutRoot" Background="White"> 

<Button Content="Text" Clic="Bouttonl_Clic"/> 
</Grid> 
</UserControl> 

Le texte d'un bouton est defini dans son attribut Content. En effet, ce contenu peut etre 
autre chose que du texte. Par exemple, une image : 

Bouton avec une image comme contenu 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schemas .microsoft . com/ win f x/2 00 6 /XAML/ presentation" 
xmlns : x="http : //schemas .microsoft. com/winf x/2 00 6 /XAML" 
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Width="100" Height="100"> 

<Grid x : Name="LayoutRoot " Background="White"> 

<Button Clic="Bouttonl_Clic"> 

<Image Source="wipuslogo . jpg" Stretch="UniformToFill"/> 

</Button> 
</Grid> 



</ User Con trol> 



Fig. 1.18: 

Bouton avec une image comme contenu 



Ou quelque chose de plus complexe tel qu'une grille contenant plusieurs images et un 
autre bouton : 



Bouton d contenu heteroclite 

<UserControl x: Class="LearnXAML . Page" 

xmlns="http : //schemas .microsoft. com/winf x/2 00 6/XAML/ presentation" 
xmlns : x="http : / / schemas .microsoft . com/winf x/2 00 6/XAML" 
Width="200" Height="200"> 

<Grid x :Name="LayoutRoot" Background="White"> 
<Button Clic="Bouttonl_Clic"> 
<Grid> 

<Grid. ColumnDef initions> 
<ColumnDef inition/> 
<ColumnDef inition/> 
</Grid . ColumnDef i nit ions> 
<Grid. RowDef initions> 
<RowDef inition/> 
<RowDef inition/> 
</Grid . RowDef initions> 
<Image Grid.Row="0" 
Grid.Column="l" 
Source="wipuslogo . j pg" 
Stretch="UniformToFill"/> 
<Image Grid.Row="0" 
Grid.Column="0" 
Source="wipuslogo . j pg" 
Stretch="UniformToFill"/> 
<Image Grid.Row="l" 
Grid.Column="l" 
Source="wipuslogo . j pg" 
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Stretch="UniformToFill"/> 
<Button Grid.Row="l" 
Grid.Column="0" 

Content="Un autre"/> 



</Grid> 
</Button> 
</Grid> 
</ User Con trol> 





, Un autre 





Fig. 1.19: 

Bouton a contenu heteroclite 



(D Genericite du principe des poupees suisses 

Ce principe s'applique a tous les elements XAML. 

CheckBox 

Une CheckBox est une boite a deux ou trois etats selon sa configuration. Son etat peut etre 
coche, non coche ou eventuellement inconnu. 

Cet etat est stocke sous forme d'un booleen annulable dans l'attribut IsChecked. 

L'attribut IsThreeState permet de definir si la CheckBox peut ou non passer par l'etat 
inconnu : 

Exemple de CheckBox 

<User Control x : Class="LearnXAML . Page" 

xmlns = "http : / / schema s .microsoft. com/ win f x/2 00 6 /XAML/ present at ion" 
xmlns : x="http : // schema s .microsoft. com/winf x/2 00 6 /XAML" 
Width="200" Height="50"> 

<StackPanel x : Name="LayoutRoot" Background="White"> 

<CheckBox IsChecked="False" Content="Not Checked CheckBox"/> 
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<CheckBox IsChecked="True" Content="Checked CheckBox"/> 
<CheckBox I sThreeState="True" I sChecked=" { x : Null } " 
Content="Null Checked CheckBox"/> 

</StackPanel> 
</UserControl> 



Fig. 1.20: 



I Not Checked CheckBox 

lj/ checked checkBox i Exemple de CheckBox 

I - Null Checked CheckBox 



Lorsqu'une CheckBox passe d'un etat a un autre, les evenements Checked et 
Unchecked sont declenches : 

Evenements Checked et Unchecked (XAML) 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schema s .microsoft. com/winf x/2 00 6 /XAML/ presentation" 
xmlns : x="http : / / schemas .microsoft . com/winf x/2 00 6 /XAML" 
Width="200" Height="50"> 

<StackPanel x : Name="LayoutRoot" Background="White"> 
<CheckBox I sChecked=" False" Content="CheckBox" 
Checked="CheckBox_Checked" 
Unchecked=" CheckBox Unchecked" /> 

</StackPanel> 
</UserControl> 



<^jt Evenements Checked et UnCheked (C#) 

private void CheckBox Checked (object sender, RoutedEventArgs e) 
{ } 

private void CheckBox Unchecked (obj ect sender, RoutedEventArgs e) 
{ } 



ToggleButton 

Un ToggleButton est une CheckBox sous forme de bouton. Son etat peut etre enfonce, 
non-enfonce ou eventuellement inconnu. 

Cet etat est stocke sous forme d'un booleen annulable dans l'attribut IsChecked. 
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L'attribut IsThreeState permet de definir si le Toggl eButton peut ou non passer par l'etat 
inconnu : 

^ Exemple de ToggleButton 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schema s .microsoft. com/ win f x/2 00 6 /XAML/ presentation" 
xmlns : x="http : / / schemas .microsoft . com/ win f x/2 00 6 /XAML" 
Width="200" Height="90"> 

<StackPanel x : Name="LayoutRoot" Background="White"> 
<ToggleButton Height="30" Content="ToggleButtonl " 

IsChecked="False"/> 
<ToggleButton Height="30" Content="ToggleButton2 " 

IsChecked="True"/> 
<ToggleButton Height="30" Content="ToggleButton3" 

IsThreeState="True" 

IsChecked="{x:Null}"/> 

</StackPanel> 
</ User Con trol> 



► Fig. 1.21 : 

Exemple de ToggleButton 



ToggleButton2 



ToggleButton3 



Lorsque l'etat d'un ToggleButton change, les evenements Checked et Unchecked sont 
declenches : 



Evenements d'etat d'un ToggleButton 

<User Control x : Class="LearnXAML . Page" 

xmlns = "http : //schemas .microsoft . com/ win f x/2 00 6 /XAML/ present at ion" 
xmlns : x="http : //schemas .microsoft. com/winf x/2 00 6 /XAML" 
Width="200" Height="90"> 

<StackPanel x : Name="LayoutRoot" Background="White"> 
<ToggleButton Height="30" Content="ToggleButtonl " 
IsChecked="False" 
Checked="ToggleButton_Checked" 
Unchecked=" Toggl eButton Unchecked" /> 

</StackPanel> 
</UserControl> 
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RadioButton 

Les RadioButtons fonctionnent de la meme facon que les ToggleButtons. Eux aussi 
possedent les attributs IsChecked, IsThreeState, Content, etc. 

Cependant, ils offrent une fonctionnalite supplemental les rendant interessants : 
l'attribut GroupName. 

Parmi un ensemble de plusieurs RadioButtons partageant le meme GroupName, seul un 
RadioButton pourra avoir son etat IsCheked a vrai. Si un autre de ces RadioButtons passe 
a l'etat Checked, automatiquement, le precedent RadioButton Checked deviendra 
Unchecked : 



Exemple de RadioButtons 



<UserControl x: Class="LearnXAML . Page" 






xmlns = "http : / / schema s .microsoft. com/winf x/2 00 6/XAML/ presentation" 


xmlns : x="http : //schemas .microsoft. com/winf x/2 00 6/XAML" 






Width="200" Height="130"> 






<StackPanel x : Name="LayoutRoot" Background="White"> 






<Border BorderBrush="Black" BorderThickness="l " 






CornerRadius="5" Margin="5"> 






<StackPanel> 






<RadioButton GroupName="Groupl " Content="Radiol 


1 


"/> 


<RadioButton GroupName="Groupl " Content="Radiol 


2 


II 


IsChecked="True"/> 






<RadioButton GroupName="Groupl " Content="Radiol 


3 


"/> 


</StackPanel> 






</Border> 






<Border BorderBrush="Black" BorderThickness="l " 






CornerRadius="5" Margin="5"> 






<StackPanel> 






<RadioButton GroupName="Group2 " Content="Radio2 


1 


II 


IsChecked="True"/> 






<RadioButton GroupName="Group2 " Content="Radio2 


2 


"/> 


<RadioButton GroupName="Group2 " Content="Radio2 


3 


"/> 


</StackPanel> 






</Border> 






</StackPanel> 






</UserControl> 
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< Radiol. 1 
Radiol. 2 
Radio 1.3 



Radio 2.1 
Radio 2. 2 
Radio2.3 



Fig. 1.22: 

Exemple de RadioButtons 



De meme que pour le ToggleButton, les evenements Checked et Unchecked sont 
declenches lorsqu'un RadioButton change d'etat. 

TextBox 

Element de saisie de texte, une TextBox offre les memes attributs qu'un TextBlock : 

Exemple de TextBox 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schema s .microsoft. com/ win f x/2 00 6 /XAML/ presentation" 
xmlns : x="http : / / schemas .microsoft . com/ win f x/2 00 6 /XAML" 
Width="200" Height="30"> 

<StackPanel x : Name="LayoutRoot" Background="White"> 
<TextBox FontFamily="Arial" 
For eground=" Black" 
Text=" (Please insert text here) " 
Margin="5" 

TextChanged="TextBox_TextChanged"/> 

</StackPanel> 
</ User Con trol> 



► Fig. 1 .23 : 

(Please insert text here) r I I T in 

bxemple de lextBox 



L'evenement TextChanged est declenche lorsque l'utilisateur a fini d'editer le texte 
contenu dans la TextBox. Cela etant, hormis pour une validation, le texte entre par 
l'utilisateur sera utilise lors d'un autre evenement, tel que le clic sur un bouton adjacent. 

Pour recuperer le texte contenu dans ce TextBox a partir du code C#, il suffit d'en utiliser 
la propriete Text. 
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PasswordBox 

Une PasswordBox est une TextBox n'affichant pas les caracteres frappes au clavier mais 
des caracteres de remplacements : 

Exemple de PasswordBox 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schema s .microsoft. com/winf x/2 00 6/XAML/ presentation" 
xmlns : x="http : // schemas .microsoft . com/winf x/2 00 6/XAML" 
Width="200" Height="30"> 

<StackPanel x : Name="LayoutRoot" Background="White"> 
<PasswordBox FontFamily="Arial" 
For eground=" Black" 

Password=" (Please insert text here) " 
Margin="5" 

Pa sswordChanged=" PasswordBox PasswordChanged" 
Pas swordChar ="*"/> 

</StackPanel> 
</ User Con trol> 

Fig. 1.24: 

Exemple de PasswordBox 

Attention, le texte contenu dans une PasswordBox porte le nom de Password et non de 
Text. II en va de meme pour la propriete dans le code C#. 

L'attribut PasswordChar donne au developpeur l'opportunite de choisir un caractere de 
remplacement different de celui de la plateforme d'origine. 

ListBox et ListBoxltem 

La ListBox est un element compose d'un StackPanel et d'un ScrollViewer. Mais ce n'est 
pas tout, elle implemente d'origine une interface lui permettant de gerer une collection 
d' items selectionnables : 

J^jt ListBox contenant des ListBoxltems 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schemas .microsoft . com/winf x/2 00 6/XAML/ presentation" 
xmlns : x="http : / / schemas .microsoft . com/winf x/2 00 6/XAML" 
Width="200" Height="200"> 

<Grid x :Name="LayoutRoot" Background="White"> 
<ListBox> 
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<ListBoxItem 
<ListBoxItem 
<ListBoxItem 
<ListBoxItem 



Content="ListBoxIteml"/> 
Content="ListBoxItem2 "/> 
Content="ListBoxItem3 "/> 
Content="ListBoxItem4"/> 



</ListBox> 



</Grid> 
</ User Con trol> 




Fig. 1.25: 



ListBox contenant des ListBoxltems 



Les elements utilises dans cet exemple comme items sont des ListBoxltems. Bien que les 
ListBoxltems soient prevus specialement pour servir d'items dans une ListBox, tout autre 
element de la plateforme peut les substituer. 

Ainsi, il est possible d' avoir une ListBox contenant comme items des boutons, des autres 
ListBox, des elements de Layout contenant eux-memes d' autres elements enfants, etc. : 

ListBox contenant des elements heteroclites 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schema s .microsoft. com/ win f x/2 00 6 /XAML/ presentation" 
xmlns : x="http : / / schemas .microsoft . com/ win f x/2 00 6 /XAML" 
Width="200" Height="200"> 

<Grid x : Name="LayoutRoot" Background="White"> 
<ListBox> 

<Button Content="ListBoxIteml"/> 
<ListBox> 

<ListBoxItem Content="ListBoxItem2 . l"/> 
<ListBoxItem Content="ListBoxItem2 . 2"/> 
</ListBox> 

<StackPanel Orientation="Horizontal"> 

<ListBoxItem Content="ListBoxItem3 . l"/> 
<Button Content="ListBoxItem3 . !"/> 

</StackPanel> 

<ListBoxItem Content="ListBoxItem4 "/> 
</ListBox> 
</Grid> 
</UserControl> 
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ListBoxItem 1 


ListBoxItem2.1 
ListBoxJtem2.2 




ListBoxJtem3.1 1 
ListBoxItem4 


ListBoxItem3.1 



Fig. 1.26 : 

ListBox contenant des elements heteroclites 



Lorsque la selection passe d'un element a un autre, l'evenement Sel ectedltemChanged est 
declenche. 

ComboBox etComboBoxltem 

Une ComboBox est une ListBox presentee sous forme d'une liste deroulante. Son 
utilisation est done semblable a celle d'une ListBox : 

Exemple de ComboBox 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schema s .microsoft . com/winf x/2 00 6/XAML/ presentation" 
xmlns : x="http : / / schemas .microsoft . com/ winf x/2 00 6/XAML" 
Width="200" Height="40"> 

<Grid x : Name="LayoutRoot " Background="White"> 
<ComboBox Height="30" Margin="5"> 

<ComboBoxI tern Content=" ComboBoxIteml "/> 
<ComboBoxItem Content="ComboBoxItem2 "/> 

<ComboBoxItem Content="ComboBoxItem3" IsSelected="True"/> 
<ComboBoxItem Content="ComboBoxItem4 "/> 
</ ComboBox> 
</Grid> 
</UserControl> 



ComboBoxIteml 
Combo BoxItem2 
ComboBoxItem3 
ComboBoxItem4 



Fig. 1.27: 

Exemple de ComboBox 



Les elements utilises dans cet exemple sont des ComboBoxItems, mais comme une 
ListBox, les ComboBox acceptent n'importe quels elements comme items. 
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II est done possible, par exemple, de construire une ComboBox d'images, de boutons et 
d' informations di verses reunies : 

Exemple de ComboBox a contenu heteroclite 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schema s .microsoft. com/ win f x/2 00 6 /XAML/ presentation" 
xmlns : x="http : / / schemas .microsoft . com/ win f x/2 00 6 /XAML" 
Width="200" Height="40"> 

<Grid x :Name="LayoutRoot" Background="White"> 
<ComboBox Height="30" Margin="5"> 
<Image Source="wipuslogo . jpg" 

Height="100" Width="100" 
Stretch="Unif ormToFill"/> 
<Button Content="ComboBoxItem2"/> 
<StackPanel Orientation="Vertical"> 

<TextBlock Text="ComboBoxItem3" /> 
<Button Content="ComboBoxItem4"/> 
</StackPanel> 

<Image Source="http : / /www . wipus . com/ Wipus Cloud. j pg" 
Height="100" Width="100" 
Stretch="Unif ormToFill"/> 

</ ComboBox> 
</Grid> 
</UserControl> 




ComboBoxItem2 

ComboBoxItem3 
Combo BoxItem4 




Fig. 1.28: 

Exemple de ComboBox d contenu heteroclite 



Lorsque la selection passe d'un element a un autre, l'evenement Sel ectedltemChanged est 
declenche. 
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Slider 

Un Slider est un curseur se deplacant le long d'une ligne pour permettre a l'utilisateur 
d'indiquer une valeur numerique de facon visuelle. La valeur (Val ue) indiquee par le 
curseur varie de l'attribut Minimum a gauche de la ligne a l'attribut Maximum a droite de la 
ligne : 

Exemple de Slider 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schema s .microsoft . com/winf x/2 00 6/XAML/ presentation" 
xmlns : x="http : / / schemas .microsoft . com/ winf x/2 00 6/XAML" 
Width="200" Height="40"> 

<Grid x : Name="LayoutRoot " Background="White"> 
<Slider Maximum="l 00 " 
Minimum="0" 
Value="40" 
SmallChange="l" 
LargeChange="10" 
/> 

</Grid> 
</UserControl> 

Fig. 1. 29: 

Exemple de Slider 



Les attributs Smal l Change et LargeChange representent respectivement la valeur ajoutee 
ou retiree a la valeur en cours lors d'un deplacement par la souris ou le clavier. 

L'evenement Val ueChanged est declenche lorsque la valeur indiquee par le curseur est 
modifiee par l'utilisateur. 

1 .7 Autres elements utiles 
Line 

La plateforme n'offre pas que des elements d'interface mais aussi des elements 
graphiques tels que les lignes, les polygones, les rectangles, etc. 

Bien que ces elements soient plus utiles aux designers qu'aux developpeurs, il est 
interessant de comprendre leurs fonctionnements : 
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Exemple de Ligne 



<UserControl x: Class="LearnXAML . Page" 

xmlns="http : //schemas .microsoft. com/ win f x/2 00 6 /XAML/ presentation" 
xmlns : x="http : //schemas .microsoft. com/ win f x/2 00 6 /XAML" 
Width="200" Height="40"> 

<Grid x :Name="LayoutRoot" Background="White"> 



<Line Xl="5" Yl="10" 

X2="195" Y2="30" 

Stroke="Black" 

StrokeThickness="3"/> 

<Line Xl="5" Yl="30" 

X2="195" Y2="30" 
Stroke="Magenta" 
StrokeThickness="3"/> 



Dans cet exemple, deux lignes sont dessinees grace aux positions relatives (en pixels) de 
leurs points d'origine et de destination par rapport a l'element qui les contient. 

Ces deux points sont respectivement {X1,Y1} et {X2,Y2}. 

Rectangle 

Dans le meme ordre d'idees, un rectangle est defini par ses dimensions. Les attributs 
RadiusX et RadiusY, quant a eux, permettent d'en arrondir les bords : 

Exemple de Rectangle 

<User Control x : Class="LearnXAML . Page" 

xmlns = "http : / / schemas .microsoft . com/ win f x/2 00 6 /XAML/ present at ion" 
xmlns : x="http : //schemas .microsoft. com/winf x/2 00 6 /XAML" 
Width="200" Height="60"> 

<StackPanel x : Name="LayoutRoot" Background="White"> 
<Rectangle Fill="Magenta" Margin="5" 
Height="20" Width="100" 

MouseLef tButtonDown=" Rectangle_MouseLef tButtonDown"/> 
<Rectangle Fill="Blue" Margin="5" 

Height="20" RadiusX="30" RadiusY="30 " /> 

</StackPanel> 
</ User Con trol> 



</Grid> 
</UserControl> 




Fig. 1.30: 

Exemple de ligne 
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Fig. 1.31 : 

Exemple de Rectangle 



Q) Interaction utilisateur des elements graphiques 

Souvenez-vous que tout element graphique garde une possibility d'interaction avec la souris et/ou le 
clavier. Dans cet exemple, nous retrouvons I'evenement MouseLeftButtonDown. 

Attention, un rectangle est un element geometrique et non un element d'interface ; il 
n'accepte done pas de contenu. Le code suivant ne fonctionnera pas : 

J^jt Rectangle avec contenu 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schema s .microsoft . com/winf x/2 00 6/XAML/ presentation" 
xmlns : x="http : / / schemas .microsoft . com/ winf x/2 00 6/XAML" 
Width="200" Height="60"> 

<StackPanel x : Name="LayoutRoot" Background="White"> 
<Rectangle Fill="Magenta" Margin="5" 
Height="20" Width="100" 

MouseLef tButtonDown=" Rectangle MouseLef tButtonDown"> 
<Button/> 

</Rectangle> 
</StackPanel> 
</ User Con trol> 

Pour obtenir un resultat semblable qui fonctionne, utilisez un Border avec Background. 



En Silverlight, un element Popup n'est pas un popup a proprement parler tel qu'on 
l'entend dans le monde du Web. En effet, il ne s'agit en aucun cas d'une fenetre 
supplemental qui s'ouvre hors du navigateur dans lequel s'execute l'application 
Silverlight. 

Un popup Silverlight n'est rien d'autre qu'un element d'interface independant de la 
structure solide definie par les elements de Layout de l'application. II s'affiche librement 
au-dessus de tout autre controle. 



Popup 
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Dans cet exemple, un bouton controle l'ouverture d'un popup. Ce popup contient comme 
elements enfants un texte et un bouton declenchant sa fermeture : 

Exemple de Popup (XAML) 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schema s .microsoft. com/ win f x/2 00 6 /XAML/ presentation" 
xmlns : x="http : / / schemas .microsoft . com/ win f x/2 00 6 /XAML" 
Width="200" Height="60"> 

<Grid x :Name="LayoutRoot" Background="White"> 
<Button Height="20" 
Width="100" 
Clic="OpenPopup" 
Content="Open Popup"/> 
<Popup Name="MyPopup" 

Ver ticalAlignment=" Center " 
Hor izontalAlignment=" Center "> 
<Border BorderBrush="Black" 
BorderThickness="2 " 
Background="Beige"> 
<StackPanel Or ientation= "Horizontal "> 
<TextBlock Text="Text Popup" 

Margin="5"/> 
<Button Margin="5" 

Clic="ClosePopup" 
Content="x"/> 
</StackPanel> 
</Border> 
</Popup> 
</Grid> 
</UserControl> 

Ce sont sur les evenements CI i c des deux boutons que Ton assignera une valeur 
differente a l'attribut IsOpen du popup. Lorsque cet attribut est vrai, le popup est affiche : 

fl^jt Exemple de Popup (C#) 



using 


System; 






using 


System. 


Collections. Generic 


using 


System. 


Linq; 




using 


System. 


Net; 




using 


System. 


Windows 




using 


System. 


Windows 


Controls ; 


using 


System. 


Windows 


Documents ; 


using 


System. 


Windows 


Input; 


using 


System. 


Windows 


Media; 
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using System. Windows .Media .Animation; 
using System. Windows . Shapes ; 




namespace LearnXAML 




{ 

public partial class Page : UserControl 




t 

public Page ( ) 




InitializeComponent ( ) ; 




private void OpenPopup (ob j ect sender, 


RoutedEventArgs e) 


MyPopup . IsOpen = true; 




private void ClosePopup (obj ect sender, 


RoutedEventArgs e) 


MyPopup . IsOpen = false; 

} 

} 









Open 


Text Popup i x 





Fig. 1 .32 : Exemple de Popup 

1 .8 Premiere approche du DataBinding 

Le binding est la methode de liaison de donnees entre le code applicatif (code C#) et le 
code XAML. 

Grace a cette methode, il devient aise d'afficher un set de donnees a l'utilisateur tout en 
lui proposant une interaction directe avec elles, sans devoir ecrire de nombreuses lignes 
de code. 

Pour Her des donnees a une interface, il nous faut d'abord creer ces donnees. 

Si vous n'etes pas habitue a la programmation orientee objets, reportez-vous a 
Vannexe 2 de ce livre, Introduction au C#. 
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L' application que nous allons realiser ici se doit de gerer une liste d'etudiants, repartis 
dans plusieurs cours. Un etudiant est defini par son Nom, son Prenom et son Age : 

fl^j Etudiant.cs 

using System; 

using System. Net; 

using System. Windows ; 

using System. Windows . Controls ; 

using System. Windows . Documents ; 

using System. Windows . Ink; 

using System. Windows . Input; 

using System. Windows . Media; 

using System. Windows .Media . Animation; 

using System. Windows . Shapes ; 

namespace LearnXAML 
{ 

public class Etudiant 
{ 

private string nom; 

public string Nom 
{ 

get { return nom; } 
set { nom = value; } 

} 

private string prenom; 

public string Prenom 
{ 

get { return prenom; } 
set { prenom = value; } 

} 

private int age; 

public int Age 
{ 

get { return age; } 
set { age = value; } 

} 

public Etudiant () 

{ 

} 
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} 

} 

Un cours, quant a lui, est defini par son Nom et comprend une liste d' etudiants 

Cours. cs 

using System; 

using System. Net; 

using System. Windows ; 

using System. Windows . Controls; 

using System. Windows . Documents ; 

using System. Windows . Ink; 

using System. Windows . Input; 

using System. Windows .Media; 

using System. Windows .Media .Animation; 

using System. Windows . Shapes ; 

using System. Collections. Generic; 

namespace LearnXAML 
{ 

public class Cours 
{ 

private string nom; 

public string Nom 
{ 

get { return nom; } 
set { nom = value; } 

} 

private List<Etudiant> etudiants; 

public List<Etudiant> Etudiants 
{ 

get { return etudiants; } 
set { etudiants = value; } 

} 

public Cours ( ) 

{ 

} 

} 

} 
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Ajoutons au code applicatif de cette application la declaration en dur d'une liste de deux 
cours comprenant chacun quelques etudiants : 



Declaration en dure d'une liste d'etudiant 



using 


System, 






using 


System 


Co llections. Generic ; 


using 


System 


Linq; 




using 


System 


Net; 




using 


System 


Windows 




using 


System 


Windows 


Controls ; 


using 


System 


Windows 


Documents ; 


using 


System 


Windows 


Input; 


using 


System 


Windows 


Media; 


using 


System 


Windows 


Media . Animation 


using 


System 


Windows 


Shapes ; 



namespace LearnXAML 
{ 

public partial class Page : UserControl 
{ 

private List<Cours> ListeDeCours; 

public Page ( ) 
{ 

InitializeComponent ( ) ; 



#region HardCode ListeDeCours 
ListeDeCours = new List<Cours> ( ) 
{ 

new Cours ( ) 
{ 

Nom = "Declamation", 

Etudiants = new List<Etudiant> ( ) 

{ 

new EtudiantO { Prenom="Laurane" , Nom="D.", Age=19 }, 
new EtudiantO { Prenom="Mai" , Nom="H.'\ Age=18 }, 
new EtudiantO { Prenom="Dovy " , Nom="F.", Age=21 } 

} 

}, 

new Cours ( ) 
{ 

Nom = "Sculpture", 

Etudiants = new List<Etudiant> ( ) 

{ 

new EtudiantO { Prenom="Adelaide" , Nom="A.", Age=19 }, 
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new EtudiantO {Prenom="Klintes", Nom="T.", Age=20 }, 
new EtudiantO { Prenom="Kaphilis" , Nom="A.", Age=2 0 }, 
new EtudiantO { Prenom=" Jade" , Nom="G.", Age=14 } 

} 

} 

}; 

#endregion HarCode ListeDeCours 

} 

} 

} 

Dans cette declaration, nous retrouvons la structure suivante : 

un cours de declamation dont les eleves sont Laurane, Mai et Dovy ; 

un cours de sculpture dont les eleves sont Adelaide, Klintes, Kaphilis et Jade. 

Du cote de la definition de l'interface, declarons une ListBox : 

% fichierXAML 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schema s .microsoft . com/winf x/2 00 6/XAML/ presentation" 
xmlns : x="http : / / schemas .microsoft . com/winf x/2 00 6/XAML" 
Width="400" Height="300"> 

<Grid x : Name="LayoutRoot " Background="White"> 

<ListBox Name="CoursListBox"/> 
</Grid> 
</UserControl> 

Pour lier la liste de cours a cette ListBox, il suffit d'ajouter dans le code applicatif, sous 
la declaration en dur : 

Ajout au code applicatif 
CoursListBox . ItemsSource = ListeDeCours; 

Cette ligne de code ordonne a la ListeBox CoursListBox d'afficher le contenu de la liste 
ListeDeCours. 
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Fig. 1.33: 

DataBinding direct 



Voici le resultat : 



LearnXaml.Cours 



LearnXaml.Cours 



Bien que cela ne plante pas et que nous detections deja 2 items differents dans cette 
ListBox, l'interface obtenue est loin d'etre satisfaisante pour un utilisateur final. 

Pourquoi ? La plateforme .Net, en 1' absence d' informations lui dictant comment afficher 
un objet, en appelle a la methode ToStri ng. Cette methode, presente intrinsequement dans 
chaque objet, retourne une chaine de caracteres comprenant le nom de la classe de cet 
objet. 

Le premier contournement de ce probleme est done la surcharge de cette methode : 

Ajout a Cours.cs 

public override string ToStringO 
{ 

string ret = this. nom; 

if (etudiants == null) 
return ret; 

ret += "\t("; 

f oreach (Etudiant e in etudiants) 

ret += " "+e . Prenom; 
ret += " ) "; 



return ret; 

} 
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Grace a cette simple modification, notre affichage de donnees est deja bien plus agreable 



Data Tern plates 

Voici la facon la plus interessante de rendre lisible toute notre liste de cours ainsi que ses 
eleves respectifs. Un DataTemplate est une structure XAML qui sera appliquee a chacun 
des items d'une List Box donnee. 

Ici le changement se fait uniquement dans le code XAML, l'independance avec le code 
applicatif est parfaite. Ce qui permet de deleguer plus facilement ce travail aux designers 
et integrateurs. 

La ListBox possede un attribut du nom de ItemTempl ate qui permet de definir quel 
Template utiliser pour afficher les items : 

Exemple de DataTemplate l 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schema s .microsoft. com/winf x/2 00 6 /XAML/ presentation" 
xmlns : x="http : //schemas .microsoft. com/winf x/2 00 6 /XAML" 
Width="400" Height="300"> 

<Grid x : Name="LayoutRoot " Background="White"> 



<ListBox Name="CoursListBox"> 
<ListBox . ItemTemplate> 
<DataTemplate> 

<Border CornerRadius="2" Margin="3" 
Bo rderBrush=" Black" Border Thickness=" 1 "> 
<TextBlock Text=" {Binding Path=Nom} " 
N> Margin="5"/> 
</Border> 



a voir : 



Declamation ( Laurane Mai Dovy ) 
Sculpture ( Adelaide Klintes Kaphilis Jade ) 



Fig. 1.34: 

DataBinding avec 
surcharge de ToStringO 
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</DataTemplate> 

</ListBox. ItemTemplate> 
</ListBox> 
</Grid> 
</UserControl> 



Pour preciser quelles proprietes des objets forment la source du binding, il faut afficher. 
XAML offre une methode de navigation par chame de caracteres a travers ces derniers. 

Ainsi le code {Binding Path=Nom} dans notre exemple, stipule que pour chaque Cours, 
1' interface doit afficher la propriete Nom. 

En ce qui concerne la liste d'eleves, il faut ajouter a ce DataTemplate une nouvelle liste, 
dont V ItemSource est la propriete Etudiants de chaque cours : 

Exemple de DataTemplate2 

<UserControl x: Class="LearnXAML . Page" 

xmlns = "http : / / schema s .microsoft. com/ win f x/2 00 6 /XAML/ present at ion" 
xmlns : x="http : / / schemas .microsoft . com/ win f x/2 00 6 /XAML" 
Width="400" Height="300"> 

<Grid x : Name="LayoutRoot" Background="White"> 



<ListBox Name="CoursListBox"> 
<ListBox . ItemTemplate> 
<DataTemplate> 

<Border CornerRadius="2 " Margin="3" 
Bo rderBrush=" Black" Border Thickness=" 1 "> 
<StackPanel Ori en tation=" Horizontal "> 

<TextBlock Text=" {Binding Path=Nom}" Margin="5"/> 
<ListBox ItemsSource=" {Binding Path=Etudiants} "/> 
</StackPanel> 
</Border> 
</DataTemplate> 
</ListBox. ItemTemplate> 




Fig. 1.35: 

Exemple de 
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</ListBox> 
</Grid> 
</UserControl> 



Declamation 


LearnXamI.Etudiant 




LearnXamI.Etudiant 




LearnXamI.Etudiant 




Sculpture 


LearnXamI.Etudiant 




LearnXamI.Etudiant 




LearnXamI.Etudiant 




LearnXamI.Etudiant 



Fig. 1.36: 

Exemple de 
Data Tem plate2 



Un nouveau DataTemplate doit ensuite etre cree, cette fois non pour les cours mais pour 
les etudiants : 



fl^jt Exemple de DataTemplate 3 



<UserControl x: Class="LearnXAML . Page" 




xmlns= 


r "http : / / schema s . microsoft . com/ win fx/ 2006/XAML/presentation" 


xmlns : 


x="http : // schema s .microsoft . com/winf x/200 6/XAML" 




Widths 


"400" Height="300"> 




<Grid 


x : Name="LayoutRoot " Background="White"> 




<ListBox Name="CoursListBox"> 






<ListBox. ItemTemplate> 






<DataTemplate> 






<Border CornerRadius="2 " Margin="3" 






BorderBrush="Black" BorderThickness=" 1 "> 






<StackPanel Orientation="Horizontal"> 






<TextBlock Text="{ Binding Path=Nom} " Margin="5" 


/> 




<ListBox ItemsSource=" { Binding Path=Etudiants } 


"> 




<ListBox. ItemTemplate> 






<DataTemplate> 






<StackPanel Orientation=" Horizontal 


■> 




<TextBlock Text=" {Binding 






Path=Prenom} " Margin="5 


"/> 




<TextBlock Text=" {Binding 






Path=Nom}" Margin="5"/> 






<TextBlock Text=" {Binding 






Path=Age}" Margin="5"/> 






</StackPanel> 
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</DataTemplate> 
</ListBox. ItemTemplate> 

</ListBox> 
</StackPanel> 

</Border> 
</DataTemplate> 
</ListBox. ItemTemplate> 
</ListBox> 
</Grid> 
</ User Con trol> 



Declamation 


Laurane 


D. 19 




Mai H. 


18 




Dovy F. 


21 



Sculpture 


Adelaide A. 19 




Klintes T. 20 




Kaphilis A. 20 




Jade G. 14 



Fig. 1.37: 

Exemple de 
Data Tern plate 3 



Cette methode donne un resultat surprenant. Cependant, le code, lui, est des plus 
immondes. Lire un code XAML de ce genre est presque impossible des qu'il grandit un 
peu. 

Resoudre ce probleme de clarte invoque l'utilisation des Ressources XAML. 

Chaque element XAML a la possibilite d'etre l'hote d'une collection de ressources. Ces 
ressources seront accessibles a tous les elements enfants de l'element hote grace a leur 
nom. (En l'occurrence, grace a leur x:Key.) 

Le code XAML de l'exemple precedent, agremente de l'utilisation des ressources, 
devient : 



JJ^jt Exemple de Data Template en Ressources 

<User Control x: Class="LearnXAML . Page" 

xmlns="http : // schema s .microsoft . com/ win fx/200 6 /XAML /pre sen tat ion" 
xmlns : x="http : //schemas .microsoft. com/winf x/2 00 6 /XAML" 
Width="400" Height="300"> 
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<UserControl . Resources> 

<DataTemplate x:Key="EtudiantDataTemplate"> 

<StackPanel Orientation="Horizontal"> 

<TextBlock Text=" {Binding Path=Prenom} " Margin="5"/> 
<TextBlock Text=" {Binding Path=Nom}" Margin="5"/> 
<TextBlock Text=" {Binding Path=Age}" Margin="5"/> 

</StackPanel> 
</DataTemplate> 

<DataTemplate x : Key="CoursDataTemplate"> 

<Border CornerRadius="2" Margin="3" 

BorderBrush="Black" Border Thickness=" 1 "> 
<StackPanel Orientation="Horizontal"> 

<TextBlock Text=" {Binding Path=Nom}" Margin="5"/> 
<ListBox ItemsSource=" { Binding Path=Etudiants } " 
ItemTemplate=" {StaticResource EtudiantDataTemplate} " /> 
</StackPanel> 
</Border> 
</DataTemplate> 

</UserControl .Resources> 

<Grid x : Name="LayoutRoot " Background="White"> 
<ListBox Name="CoursListBox" 

ItemTemplate=" {StaticResource CoursDataTemplate} " /> 

</Grid> 
</ User Con trol> 

Non seulement la lisibilite du code s'est beaucoup amelioree, mais en plus, ces 
DataTemplates sont maintenant reutilisables a d'autres endroits de notre interface, sans 
qu'on ait besoin de les copier. 

(J) Difference entre StaticResource et DynamicResource 

Remarquez I'utilisation du mot StaticResource. Une ressource statique est une ressource definie dans le 
meme document et en amont de son utilisation. Ceci explique que EtudiantDatatTemplate soit defini 
avant CoursDataTemplate. 

Une alternative a cette structure rigoureuse est d'utiliser DynamicResource. Une ressource dynamique 
peut etre definie n'importe ou dans I'application, meme dans un autre fichier. 
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ValueConverter 

Dans l'exemple precedent, une propriete C# est affichee telle quelle lors de son binding 
sur l'interface. Ainsi, le nom Lauranne est pleinement lisible. 

Cependant ce n'est pas toujours l'ideal. Si nous ajoutons la propriete EstDoue de type 
booleen aux etudiants, le resultat de son binding sera soit TRUE, soit FALSE : 

<^ Ajout a Etudiant.cs 

private bool estDoue; 

public bool EstDoue 
{ 

get { return estDoue; } 
set { estDoue = value; } 

} 

Une fois de plus, la methode ToString du type booleen sert a la plateforme. 



Declamation 


Laurane 


D. 


19 True 




Mai H. 


18 


True 




Dovy F. 


2: 


False 



Binding sans 
ValueConverter 



Sculpture 


Adelaide A. 19 True 




Klintes T. 20 False 




Kaphilis A. 20 False 




Jade G. 14 False 



I I 

Comme il n'est pas possible de surcharger cette methode dans un type primitif, une autre 
solution s'offre a nous : un ValueConverter. 

Un ValueConverter est une classe C# qui, comme son nom l'indique, transforme une 
valeur, quelle qu'elle soit, en une autre valeur. 

Ainsi dans le cas present, nous allons ecrire un ValueConverteur transformant la valeur 
TRUE en est un eleve doue, et la valeur FALSE en n'est pas un eleve doue. 
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L'interface IValueConverter fait d'une classe un ValueConverteur. Son implementation 
demande deux methodes : 

Convert convertit la valeur source en valeur a afficher. 
ConvertBack convertit la valeur a afficher en valeur source. 



EstDoueValueConverter.es 

using System; 

using System. Net; 

using System. Windows ; 

using System. Windows . Controls ; 

using System. Windows . Documents ; 

using System. Windows . Ink; 

using System. Windows . Input; 

using System. Windows . Media ; 

using System. Windows .Media .Animation; 

using System. Windows . Shapes ; 

using System. Windows . Data; 

using System. Globalization; 

namespace LearnXaml 
{ 

public class EstDoueValueConverter : IValueConverter 

{ 

private const string Doue = "est un eleve doue"; 

private const string NonDoue = "n'est pas un eleve doue"; 



fregion IValueConverter Membres 



public object Convert ( obj ect value, Type targetType, 
object parameter, Culturelnfo culture) 

{ 

bool? EstDoue = (value as bool?); 

if (EstDoue == null | | EstDoue . HasValue == false) 
throw new InvalidCastException ( 
"EstDoueValueConverter . Convert value is not bool or is null"); 

if (EstDoue. Value) 
{ 

return Doue; 

} 

else 
{ 

return NonDoue; 
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} 

} 

public object ConvertBack ( ob j ect value, Type targetType, 
object parameter, Culturelnfo culture) 

{ 

string EstDoue = value . ToString () ; 

switch (EstDoue) 

{ 

case Doue: 

return true; 

case NonDoue: 

return false; 

default : 

throw new InvalidCastException ( 
"EstDoueValueConverter . ConvertBack value incorrecte" + 
value. ToString () ) ; 
} 

} 

#endregion 

} 

} 

Pour utiliser le ValueConverter EstDoueVal ueConverter dans un binding, plusieurs etapes 
doivent etre respectees : 

ajouter le code du ValueConverter a la solution Silverlight (ou en ajouter la reference 
d'une assembly compilee prealablement pour Silverlight) ; 

ajouter au fichier XAML un using (xml s) pointant vers l'espace de noms du 
ValueConverter (dans ce cas, l'espace de noms est le meme que celui de l'application 
mais cela peut varier) ; 

creer une instance de ce ValueConverter dans les ressources de l'application ; 
specifier au binding d'utiliser cette instance de ValueConverter. 

<^jt Modification du fichier XAML 

<User Control x: Class="LearnXaml . Page" 

xmlns="http : / / schemas .microsoft . com/winf x/2006/xaml/presentation" 
xmlns : x="http : / / schemas .microsoft . com/ winfx/2006/ xaml" 
xmlns :MyApp="clr-namespace : LearnXaml" 
Width="400" Height="300"> 
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<UserControl . Resources> 



<MyApp : EstDoueValueConverter x: Key="estDoueValueConverter "/> 

<DataTemplate x : Key="EtudiantDataTemplate"> 
<StackPanel Orientation="Horizontal"> 

<TextBlock Text=" {Binding Path=Prenom} " Margin="5"/> 
<TextBlock Text="{ Binding Path=Nom}" Margin="5"/> 
<TextBlock Text=" {Binding Path=Age}" Margin="5"/> 
<TextBlock Text="{ Binding Path=EstDoue, 

Converter={StaticResource estDoueValueConverter} }" 
Margin="5" /> 

</StackPanel> 
</DataTemplate> 

<DataTemplate x : Key="CoursDataTemplate"> 
<Border CornerRadius="2 " Margin="3" 

BorderBrush="Black" Border Thickness=" 1 "> 
<StackPanel Orientation="Horizontal"> 

<TextBlock Text=" {Binding Path=Nom}" Margin="5"/> 
<ListBox ItemsSource=" {Binding Path=Etudiants } " 
ItemTemplate=" { StaticResource 
EtudiantDataTemplate} "/> 

</StackPanel> 
</Border> 
</DataTemplate> 



</UserControl .Resources> 



<Grid x : Name="LayoutRoot " Background="White"> 
<ListBox Name="CoursListBox" 

ItemTemplate=" { StaticResource CoursDataTemplate } " /> 

</Grid> 
</UserControl> 



amation D 19 est un €iivv 4ou€ 

Mai' H. 18 est un eleve doue 
Dovy F. 21 n'est pas un eleve doue 

Sculpture Adc | 8jde A . 19 est un eleve doue 

Klintes T. 20 n'est pas un eleve dout 
Kaphills A. 20 n'est pas un eleve doue 
Jade G. 14 n'est pas un eleve doue 



Fig. 1.39: 

Binding avec 
ValueConverter 
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Attributs d'un Value Converter 

II est parfois utile de laisser au charge d'interface (celui qui ecrit le XAML) la possibilite 
de configurer un ValueConverter sans devoir passer par le code C#. C'est le cas d'un 
RatioValueConverter multipliant simplement un nombre entier par un autre. II serait 
aberrant de devoir creer un RatioValueConverter par multiplication souhaitee. 

Ajouter un attribut configurable en XAML se fait en ajoutant une propriete publique dans 
la classe du ValueConverter, ainsi qu'il est montre dans le code suivant avec la propriete 
Ratio : 



RatioConverter.es 



using 


System, 






using 


System 


Net; 




using 


System 


Windows 




using 


System 


Windows 


Controls ; 


using 


System 


Windows 


Documents ; 


using 


System 


Windows 


Ink; 


using 


System 


Windows 


Input; 


using 


System 


Windows 


Media; 


using 


System 


Windows 


Media . Animation 


using 


System 


Windows 


Shapes ; 


using 


System 


Windows 


Data; 


using 


System 


Globalization; 



namespace LearnXaml 
{ 

public class RatioValueConverter : IValueConverter 
{ 

private int ratio = 5 ; 

public int Ratio 

{ 

get { return ratio; } 
set { ratio = value ; } 

} 



public object Convert (object value, Type targetType, 
object parameter, Culturelnfo culture) 

{ 

return (int) value * ratio; 

} 

public object ConvertBack (obj ect value, Type targetType, 
object parameter, Culturelnfo culture) 
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return (int) value / ratio; 



} 



II est alors possible d'utiliser ce RatioConverter dans le code XAML pour, par exemple, 
transformer l'age (en annees) des etudiants en un nombre de mois : 



Modification du code XAML 

<MyApp : EstDoueValueConverter x : Key= "estDoueValueConverter "/> 
<MyApp : RatioValueConverter x : Key="AnneeEnMoisConverter " 

Ratio="12"/> 

<DataTemplate x : Key="EtudiantDataTemplate"> 
<StackPanel Or i en tation=" Horizontal "> 

<TextBlock Text="{ Binding Path=Prenom} " Margin="5"/> 
<TextBlock Text=" {Binding Path=Nom} " Margin="5"/> 
<TextBlock Text="{ Binding Path=Age, 

Converter={StaticResource AnneeEnMoisConverter } }" 
Margin="5"/> 
<TextBlock Text=" {Binding Path=EstDoue, 

Converter= { StaticResource estDoueValueConverter} } " 
Margin="5" /> 

</StackPanel> 
</DataTemplate> 

Fig. 1.40: 

Binding avec 
RatioValueConverter 



Sculpture 


Adelaide A. 228 est un eleve doue 




Klintes T. 240 n'est pas un eleve doue 




Kaphilis A. 240 n'est pas un eleve doue 




Jade G. 168 n'est pas un eleve doue 



Declamation D , 2 28 est un eleve doue 

MaT H. 216 est un eleve doue 
Dovy F. 252 n'est pas un eleve doue 
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Le fichier Generic. XAML 

Comme nous le voyons dans l'exemple suivi tout au long ce chapitre, le nombre de 
ressources de notre page XAML ne cesse de grandir. 

Pour eviter un code trop long et rendre ces ressources accessibles depuis n'importe quel 
fichier XAML de notre application, il suffit de creer un fichier XAML du nom de 
Generic.XAML dans le dossier Themes de 1' arborescence de la solution Silverlight. 



i de solutions - Solution BookSolu.. 



Bi J 511 El S A 

^\ Solution 'BookSolution' (2 projets) 
B £3 LearnXaml 

Sni Properties 
References 
_j Theme 

r Generic.xamI 
* App.xaml 
,: ^] Cours.cs 

fJ Q EstDoueValueConverter.es 
M Etudiant.cs 
■»■ Grid.xaml 

^ Grid.xaml.es 
RatioValueConverter.es 
wipuslogo.jpg 
B .^jj LearnXaml.Web 



► Fig. 1.41 : 

Arborescence de solution pour le fichier 
Generic.XAML 



Attention, dans les proprietes du fichier Generic.xamI, le mode de compilation doit etre 
change de Page a Resource. 









Proprietes 






Proprietes 




Generic.xamI Proprietes du ficNer 




Generic.xamI Proprietes du fichier 


m j 






1 Action de generation 


| Resource 




■ Action de generation 


| Resource 




Aucun 






Aucun 


Copier dans le repert 


Compiler 




Copier dans le repert 


Compiler 


Espace de noms de I'c 


Contenu 




Espace de noms de I'c 


Contenu 


Nom de fichier 


Ressource incorporee 




Nom de fichier 


Ressource incorporee 


Outil personndise 


MppliCdtionDefinition 




Outil personnalise 


ApplicatiunDefinition 




Page 






Page 




Co de An aly sisDi c tion ary 






Cod e A naly s isDict io nary 




SplashScreen 






SplashScreen 




EntityDeploy 






EntityDeploy 



Fig. 1 .42 : Modification des proprietes de Generic.xamI 



Redefinir la structure d'une ListBox 

Nous avons vu comment changer 1' aspect des items contenus dans une ListBox lors d'un 
binding. II est egalement possible de forcer l'ordre dans lequel ces items vont s'afficher. 

De base, pour une ListBox, les items sont affiches dans un StackPanel dont l'orientation 
est verticale. Pour changer cela, il suffit de surcharger l'attribut ItemPanel de la ListBox : 
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Surchage de I'attribut ItemPanel 

<UserControl x: Class="LearnXaml . Page" 

xmlns="http : // schema s . microsoft . com/ winfx/2006/ xaml /presentation" 
xmlns : x="http : / / schemas . microsoft . com/winf x/200 6 /xaml " 
xmlns : MyApp="clr -name space : LearnXaml " 
Width="400" Height="300"> 
<UserControl . Resources> 

</UserControl . Resources> 



<Grid x : Name="LayoutRoot " Background="White"> 
<ListBox Name="CoursListBox" 

ItemTemplate=" { StaticResource CoursDataTemplate } " 
> 

<ListBox. ItemsPanel> 

<ItemsPanelTemplate> 

<StackPanel Orientation="Horizontal"/> 
</ItemsPanelTemplate> 
</ListBox. ItemsPanel> 
</ListBox> 
</Grid> 
</ User Con trol> 



Laurane D. 228 est un eleve doue 

Mai H. 216 est un eleve doue 

Dovy F. 252 n'est pas un eleve doue 



fc 



Sculpture 



Adelaide A 
Klintes T. 2A 
Kaphilis A. 2 
Jade G. 168 



► Fig. 1 .43 : 

Surcharge de I'attribut 
ItemPanel 



1 .9 Colorez votre application grace aux Brushes et aux 
Gradients 

Ajouter de la couleur a vos applications Silverlight se fait grace aux Brushes. Un Brush 
est la representation d'une couleur. 



Nous en avons souvent rencontre dans les exemples precedents de ce livre. 



73 



Le langage XAML 



En outre, dans le code suivant, White est un Brush : 



Exemple d'un Brush 

<User Control x : Class="LearnXaml . Page" 

xmlns="http : / / schemas .microsoft . com/winfx/2006/xaml/presentation" 
xmlns : x="http : / / schemas .microsoft . com/ winf x/2 00 6/xaml" 
xmlns : MyApp="clr-namespace : LearnXaml " 
Width="400" Height="100"> 

<Grid x:Name="LayoutRoot" Background="White"> 

</Grid> 
</UserControl> 

De nombreux elements d'interface ont la possibilite d'etre configures pour utiliser 
d'autres couleurs que leurs couleurs d'origines. 

II s'agit generalement des attributs Background, Foreground, Stoke, BorderColor, etc. 

Mais il y a mieux, en plus d' accepter des Brushes comme valeurs, ces attributs acceptent 
aussi des Gradients. Les Gradients sont des collections de couleurs et d' offsets 
permettant de creer un degrade. 

La classe Gradient est une classe abstraite dont decoule quelques types de Gradients 
differents et ne pouvant etre utilises directement en XAML. 

LinearGradientB rush 

Le type de Gradient le plus simple est le LinearGradiantBrush : 

Exemple de LinearGradientBrush 

<UserControl x : Class=" LearnXaml . Page" 

xmlns="http : / / schemas .microsoft . com/winf x/2006/xaml/presentation" 
xmlns : x="http : / / schemas .microsoft . com/ winfx/2006/ xaml" 
xmlns :MyApp="clr-namespace : LearnXaml " 
Width="400" Height="100"> 
<Grid x : Name="LayoutRoot "> 
<Grid . Background> 

<LinearGradientBrush> 

<GradientStop Offset="0" Color="White"/> 
<GradientStop Offset="l" Color="Black" /> 
</LinearGradientBrush> 
</Grid . Background> 
</Grid> 
</UserControl> 
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I | ► Fig. 1.44: 

Exemple de 
I LinearGradientBrush 

Le LinearGradientBrush est une fonction lineaire dont les couleurs varient 
proportionnellement a un offset. Dans ce cas, le pinceau va varier du blanc a x = 0 au noir 
a x = 100. 

II est possible d'ajouter plus de couleurs dans un LinearGradientBrush la fonction est 
alors divisee en un set de segments de taille suffisante pour afficher le degrade selon les 
ecrits du XAML : 



Exemple de LinearGradientBrush decoupe 

<UserControl x: Class="LearnXaml . Page" 

xmlns="http : // schema s . microsoft . com/winf x/2006/ xaml /presentation" 
xmlns : x="http : / / schemas . microsoft . com/ winf x/200 6 /xaml " 
xmlns : MyApp="clr -name space : LearnXaml " 
Width="400" Height="100"> 
<Grid x : Name="LayoutRoot "> 
<Gr id . Background> 

<LinearGradientBrush> 

<GradientStop Offset="0" Color="White" /> 
<GradientStop Offset="0.3" Color="Black" /> 
<GradientStop Offset="0.5" Color="White" /> 
<GradientStop Of f set="0 . 7" Color="Black" /> 
<GradientStop Offset="0.9" Color="Black" /> 
<GradientStop Offset="l" Color="White" /> 
</LinearGradientBrush> 
</Grid. Background> 
</Grid> 
</ User Con trol> 



Fig. 1.45: 

Exemple de 

LinearGradientBrush 

decoupe 
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L' orientation du degrade, ici de gauche a droite, est elle aussi modifiable. Le 
degrade commence a son attribut StartPoint et finit a son attribut EndPoint. Chacun de 
ces attributs sont des points definis par deux valeurs : X et Y en pourcentage de l'element 
a colorier. 

En modifiant un peu ces attributs, nous pouvons creer un degrade vertical : 

J^jt LinearGradientBrush vertical 

<User Control x : Class="LearnXaml . Page" 

xmlns="http : / / schemas .microsoft . com/winfx/2006/xaml/presentation" 
xmlns : x="http : / / schemas .microsoft . com/winf x/2 00 6/xaml" 
xmlns : MyApp="clr-namespace : LearnXaml " 
Width="400" Height="100"> 
<Grid x:Name="LayoutRoot"> 
<Gr id . Background> 

<LinearGradientBrush StartPoint="0 . 5 , 0" EndPoint="0 . 5 , 1 "> 
<GradientStop Offset="0" Color="White" /> 
<GradientStop Offset="l" Color="Black" /> 
</ Linear GradientBrush> 
</Grid. Background> 
</Grid> 
</UserControl> 



Fig. 1 .46 : 

Li nea rGrad ientBrush 
vertical 



RadialGradientB rush 

Un RadialGradientBrush agit de la meme maniere qu'un LinearGadientBrush mais en 
decrivant des cercles : 

fl^j Exemple de RadialGradientBrush 

<User Control x : CI as s=" LearnXaml . Page" 

xmlns = "http : / / schemas .microsoft. com/winf x/ 200 6/xaml /presentation" 
xmlns : x="http : / / schemas .microsoft . com/winf x/2 00 6/xaml" 
xmlns : MyApp="clr-namespace : LearnXaml " 
Width="400" Height="100"> 
<Grid x : Name="LayoutRoot "> 
<Gr id . Background> 

<RadialGradientBrush> 
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<GradientStop Offset="0" Color="White" /> 
<GradientStop Offset="0.3" Color="Black" /> 
<GradientStop Offset="0.5" Color="White" /> 
<GradientStop Of f set="0 . 7" Color="Black" /> 
<GradientStop Offset="0.9" Color="Black" /> 
<GradientStop Offset="l" Color="White" /> 
</RadialGradientBrush> 
</Grid. Background> 
</Grid> 
</ User Con trol> 




Fig. 1.47: 

Exemple de 
RadialGradientBrush 



Contrairement au LinearGradientBrush, ce sont les attributs Center et Gradi entOri gi n 
qui permettent de changer la source et 1' orientation du degrade : 



RadialGradientBrush decentre 

<UserControl x: Class="LearnXaml . Page" 

xmlns="http : / /schema s . microsoft . com/winf x/2006/xaml/presentation" 
xmlns : x="http : / / schema s . microsoft . com/ winfx/2006/ xaml " 
xmlns :MyApp="clr-namespace : LearnXaml " 
Width="400" Height="100"> 
<Grid x : Name="LayoutRoot "> 
<Gr id . Background> 

<RadialGradientBrush Center="0 . 8,0.8" 
Gr adientOrigin= " 0 . 8 , 0 . 8 " > 

<GradientStop Offset="0" Color="White" /> 
<GradientStop Offset="l" Color="Black" /> 
</RadialGradientBrush> 
</Grid. Background> 
</Grid> 
</UserControl> 




Fig. 1.48: 

RadialGradientBrush 
decentre 
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ImageBrush 

Les ImageBrushes vous permettent d'utiliser une image a la place d'un Brush. On les 
emploie de la meme facon que l'element Image : 

Exemple de ImageBrush 

<User Control x : Class="LearnXaml . Page" 

xmlns="http : / / schemas .microsoft . com/winf x/2006/xaml/presentation" 
xmlns : x="http : / / schemas .microsoft . com/ winfx/2006/ xaml" 
xmlns : MyApp="clr-namespace : LearnXaml " 
Width="400" Height="100"> 
<Grid x : Name="LayoutRoot "> 
<Gr id . Background> 

<ImageBrush ImageSource="wipuslogo . jpg" Stretch="None" /> 
</Grid. Background> 
</Grid> 
</UserControl> 
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L'utilite de ce genre de GradientBrush est evidente lorsqu'on l'emploie sur des attributs 
plus surprenants de la plateforme Silverlight. Dans 1' exemple qui suit, le meme 
ImageBrush est utilise sur l'attribut Foreground d'une TextBox : 

Exemple d'lmageBrush sur l'attribut Foreground 

<User Control x : CI as s=" LearnXaml . Page" 

xmlns = "http : / / schemas .microsoft . com/winf x/ 200 6 /xaml /presentation" 
xmlns : x="http : / / schemas .microsoft . com/winf x/2 00 6 /xaml" 
xmlns : MyApp="clr-namespace : LearnXaml " 
Width="400" Height="100"> 

<Grid x : Name="LayoutRoot " Background="Black"> 
<TextBlock Text="WIPUS" FontSize="l 00 " 
Ho rizontalAlignment=" Center" 
VerticalAlignment= "Center "> 
<TextBlock . Foreground> 

<ImageBrush ImageSource="wipuslogo . j pg" 
^ Stretch="Unif ormToFill"/> 
</TextBlock. Foreground> 
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Fig. 1.49: 

Exemple d'lmageBrush 
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</TextBlock> 



</Grid> 
</ User Con trol> 




Fig. 1.50: 

Exemple d'lmageBrush 
sur I'attribut Foreground 



1.10 Animez votre application grace aux StoryBoard 

En XAML, il est possible d'animer n'importe quoi, n'importe comment. En effet, par 
animation, le XAML n'entend pas seulement mouvement d'un objet mais bien variation 
d'une valeur a partir d'une valeur initiale jusqu'a une valeur finale sur une periode de 
temps donnee. 

Ainsi, bien qu'il soit possible de faire bouger un element grace a une animation, il est 
egalement envisageable d'en faire varier sa couleur, sa faille, etc. 

Plusieurs animations peuvent etre reunies en un ensemble appele StoryBoard, scenario en 
francais. 

Pour commencer en beaute, voici un scenario qui va changer la faille du texte d'un 
TexBlock et deplacer la position d'un rectangle : 

Les animations Silverlight (XAML) 

<UserControl x: Class="LearnXaml . Page" 

xmlns="http : / / schemas .microsoft . com/winf x/2006/xaml/presentation" 
xmlns : x="http : / / schemas . microsoft . com/ winfx/2006/ xaml " 
xmlns :MyApp="clr -name space : LearnXaml " 
Width="400" Height="100"> 

<Grid x : Name="LayoutRoot " Background="Black"> 
<TextBlock Name="HeodeLabel" 



</TextBlock> 
<Canvas> 

<Rectangle Fill="LimeGreen" 

Name="ProgressRect" 

Height="20" 



MouseLef tButtonDown="HeodeLabel_Clic 

Text="Heode" FontSize="10" 
Hor i z on talAlignment=" Center" 
VerticalAlignment=" Center" 
Foreground="White"> 



ii 
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Width="40" 




Canvas .Top="80" 




Canvas .Lef t="0" 




RadiusX="10" 




RadiusY="10"/> 




</ Canvas> 




<Grid . Resources> 




<Storyboard x : Name="Magnif yStoryBoard" 




Duration=" 00 : 00 : 10" 




RepeatBehavior=" Forever" 




Au toRever se= " True " > 




<DoubleAnimationUsingKey Frames 




Storyboard . Targe tN ame="HeodeLabel " 




S toryboard . Targe tProper ty= " FontSi ze " 




BeginTime="0" Duration="5"> 




<SplineDoubleKeyFrame KeyTime="00 : 00 


00" 


Value="10"/> 




<SplineDoubleKeyFrame KeyTime="00 : 00 


10" 


Value="100"/> 




</DoubleAnimationUsingKeyFrames> 




<DoubleAnimationUsingKey Frames 




Storyboard. Targe tName="ProgressRect" 




Storyboard. TargetProperty=" (Canvas . Lef t) "> 


<SplineDoubleKeyFrame KeyTime="00 : 00 


00" 


Value="0"/> 




<SplineDoubleKeyFrame KeyTime="00 : 00 


10" 


Value="360"/> 




</ DoubleAnima ti onUs ingKeyFr ame s> 




</Storyboard> 




</Grid. Resources> 




</Grid> 




</UserControl> 





Cette animation est declenchee lors de l'evenement MouseLef tButtonCl ic sur le TextBox 
HeodeLabel. 

Le code de la logique applicative de cette application appelle la methode Begin du 
scenario Magnify 'StoryBoard. Cette methode va enclencher simultanement chacune des 
animations contenues dans ce scenario : 



SO 



Animez votre application grace aux StoryBoard 



1 



J^gt Les animation en Silverlight (C#) 

using System; 

using System. Collections. Generic; 

using System. Linq; 

using System. Net; 

using System. Windows ; 

using System. Windows . Controls ; 

using System. Windows . Documents ; 

using System. Windows . Input ; 

using System. Windows .Media ; 

using System. Windows .Media .Animation; 

using System. Windows . Shapes; 

namespace LearnXaml 
{ 

public partial class Page : UserControl 
{ 

public Page ( ) 
{ 

InitializeComponent () ; 

} 

private void HeodeLabel_Clic (object sender, MouseButtonEventArgs e) 
{ 

Magni fyStoryBoard. Begin () ; 

} 

} 

} 

Fig. 1.51 : 

Animation non demarree 




Fig. 1.52: 

Animation apres 
quelques secondes 




Heode 
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Fig. 1.53: 

Animation apres 
1 0 secondes 



Ce scenario a une dure (Duration), une regie de repetition (RepeatBehavi or) et une regie 
de renversement (AutoReverse). 

La duree est le temps que prend un cycle complet de ce scenario ; il s'agit d'une valeur 
temporelle representee sous la forme hh:mm:ss. 

La regie de repetition est elle aussi une valeur temporelle. Si cette regie avait eu comme 
valeur 10:00:00, ce scenario se repeterait pendant une periode de lOheures suivant 
l'appel de la methode Begin, et s'arreterait ensuite. 

Dans le cas present, la valeur de la regie de repetition est Forever ; cela signifie que le 
scenario redemarrera ad vitam aeternam. 

La regie de renversement, quant a elle, est une valeur booleenne. Lorsqu'elle est vraie, 
une fois arrivee a sa fin, le scenario sera rembobine. 

Une Doubl eAnimationUsi ngKeyFrame est une animation modifiant la valeur d'un double 
(nombre reel) sur une certaine duree. 

Ses attributs StoryBoard.TagetName et StoryBoard.TargetProperty indiquent respecti- 
vement quel element XAML contient ce double, et le nom de l'attribut representant ce 
double. 

Ces animations possedent un attribut BeginTime et une duree (Duration). 

Inutile de preciser que jouer avec ces StoryBoard est une bonne solution pour faire luire 
un bouton lorsque la souris passe par-dessus, et ainsi de suite. 

Creez une banniere Silverlight grace aux animations 

Grace au savoir acquis au cours de ce chapitre, il nous est maintenant possible de creer 
une banniere Silverlight tel que celle du site de Mircrosoft. 
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Windows : Office i All Products j Downloads & Trials I Partner & Customer Solutions j Security & Updates | Training & Events j Support i About Microsoft 




s 2 

3 



Sometimes success takes 
more than one try 

Pass? Get 25% off a different exam 
Don't pass? Get a second shot free 

Limited-time only -» 

Microsoft Certification 
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Fig. 1.54: Banniere du site Microsoft 

Cette banniere affiche 3 publicites differentes ; des boutons sur le cote permettent de 
changer de publicite. Lorsque la souris passe par-dessus un de ces boutons, les publicites 
glissent les unes sur les autres jusqu'a ce que la publicite relative au bouton survole soit 
visible. 

Commencons par definir l'interface visuelle de la banniere sous la structure suivante : 

Canvas 

StackPanel PubCanvasl 

.Publicitel (Image + Lien vers site web) 

.Bouton vers Publicitel 

StackPanel PubCanvas2 

. Publ i c i te2 (Image + Lien vers site web) 

.Bouton vers Publicite2 

StackPanel PubCanvas3 

. Publ i c i te3 (Image + Lien vers site web) 

.Bouton vers Publ i ci te3 
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Interface visuelle de la banniere 

<User Control x : Class="SilverlightBanner . Page" 

xmlns="http : / / schema s .microsoft . com/ winfx/200 6/ xaml /pre sen tat ion" 
xmlns : x="http : / / schemas .microsoft . com/winf x/2 00 6 /xaml" 
Width="500" Height="200"> 

<Canvas x:Name="LayoutRoot" Background="White"> 

<StackPanel Name="PubCanvasl" Orientation="Horizontal "> 
<Border Name="ToPubl " Background="Beige" 
BorderBrush= "Black" 
BorderThickness="2 " 
CornerRadius="3 " 
Height="200" 
Width="80" 

MouseMove="ToPubl_MouseEnter " 
MouseEnter="ToPubl_MouseEnter"> 
<Canvas> 

<TextBlock Text="Wipus" 
Canvas .Top="80" 
Canvas .Lef t="50" 
FontSize="16"> 
<TextBlock . RenderTransf orm> 

<RotateTransf orm Angle="90" 
CenterX="0" 
CenterY="0"/> 
</TextBlock. RenderTransf orm> 

</TextBlock> 
</ Canvas> 
</Border> 
<Border Name="Publicitel " 
Background=" White" 
Height="200" 
Width="260" 
Opacity="l"> 
<Canvas> 

<Image Source="wipuslogo . j pg" Stretch="Unif orm" 
Height="200" 
Width="160"/> 

<TextBlock Text="Wipus" FontSize="35" 
Canvas .Top="100" 
FontFamily="Arial" 
Canvas .Left=" 10 0" /> 
<HyperlinkButton NavigateUri="http : \ \www . wipus . com" 
Canvas. Lef t=" 110" Canvas . Top="l 30 "> 
<StackPanel Or i en tation=" Horizontal "> 
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<Image Source="smallbtt . jpg" /> 
<TextBlock Text="Tell me more..." 
Foreground= "Black" 
Margin="5" 
FontSize="14"/> 
</StackPanel> 
</HyperlinkButton> 
</ Canvas> 
</Border> 
</StackPanel> 

<StackPanel Name="PubCanvas2" Orientation="Horizontal" 
Canvas .Lef t=" 80 "> 
<Border Name="ToPub2 " Background="Beige" 
BorderBrush="Black" 
BorderThickness="2 " 
CornerRadius="3 " 
Height="200" 
Width="80" 

MouseMove="ToPub2_MouseEnter " 

MouseEnter="ToPub2_MouseEnter"> 

<Canvas> 

<TextBlock Text="Heode" 
Canvas. Top="80" 
Canvas. Left="50" 
FontSize="16"> 
<TextBlock . RenderTransf orm> 

<RotateTransf orm Angle="90" 
CenterX="0" 
CenterY="0"/> 
</TextBlock. RenderTransf orm> 

</TextBlock> 
</ Canvas> 
</Border> 

<Border Name="Publicite2 " 

Background=" White" 
Height="200" 
Width="2 60" 
Opacity="l"> 
<Canvas> 

<Image Source="heodelogo . jpg" Stretch="Unif orm" 
Height="200" 
Width="160"/> 

<TextBlock Text="Heode" FontSize="35" 
Canvas .Top="100" 
FontFamily="Arial" 
Canvas .Lef t="10 0"/> 
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<HyperlinkButton NavigateUri="http : \\www. heode . com" 
Canvas. Left=" 110" Canvas . Top="l 30 "> 
<StackPanel Or i en tation=" Horizontal "> 
<Image Source="smallbtt . jpg"/> 
<TextBlock Text="Tell me more..." 
For eground= "Black" 
Margin="5" 
FontSize="14"/> 
</StackPanel> 
</ Hyper linkButton> 
</ Canvas> 
</Border> 
</StackPanel> 

<StackPanel Name="PubCanvas3" Orientation="Hor izontal " 
Canvas .Left=" 160 "> 
<Border Name="ToPub3" Background="Beige" 
BorderBrush="Black" 
BorderThickness="2 " 
CornerRadius="3 " 
Height="200" 
Width="80" 

MouseMove="ToPub3_MouseEnter " 

MouseEnter="ToPub3_MouseEnter" 

Opacity="l"> 

<Canvas> 

<TextBlock Text=" Jubbeo" 
Canvas .Top="80" 
Canvas .Lef t="50" 
FontSize="16"> 
<TextBlock . RenderTransf orm> 

<RotateTransf orm Angle="90" 
CenterX="0" 
CenterY="0"/> 
</ Text Block. RenderTransf orm> 

</TextBlock> 
</ Canvas> 
</Border> 

<Border Name="Publicite3" 

Background=" White" 
Height="200" 
Width="260" 
Opacity="l"> 
<Canvas> 

<Image Source=" j ubbeologo . jpg" Stretch="Uniform" 
Height="200" 
Width="160"/> 
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<TextBlock Text=" Jubbeo" FontSize="35" 
Canvas .Top="100" 
FontFamily="Arial" 
Canvas . Lef t="10 0 " /> 
<HyperlinkButton NavigateUri = "http : \\www . j ubbeo . com" 
Canvas .Left="110" Canvas . Top=" 130 "> 
<StackPanel Or i en tation=" Horizontal "> 
<Image Source=" smallbtt . jpg"/> 
<TextBlock Text="Tell me more..." 



</StackPanel> 
</ HyperlinkButton> 
</ Canvas> 
</Border> 
</StackPanel> 



Foreground= "Black 

Margin="5" 

FontSize="14"/> 



it 



</ Canvas> 
</ User Con trol> 



Fig. 1.55: 

Interface visuelle de la 
banniere 
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[*] Tell me more... 



L'effet voulu est le suivant : a chaque passage sur un des Border ToPubl, ToPub2 ou 
ToPub3, les publicites vont glisser vers la droite pour afficher la publicite relative au 
Border survole. 

Si la publicite relative au Border a deja glisse prealablement vers la droite, elle va glisser 
vers la gauche. 

II y a done 3 etats a notre banniere : 



Publ i ci te3Vi si bl e (etat actuel de la banniere) ; 
Publ icite2Visible ; 
Publ icitelVisible. 
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Pour des raisons de lisibilite du code, creons une enumeration representant ces etats : 

Etat de la banniere (C#) 

using System; 

using System. Net; 

using System. Windows ; 

using System. Windows . Controls ; 

using System. Windows . Documents; 

using System. Windows . Ink; 

using System. Windows . Input; 

using System. Windows . Media; 

using System. Windows .Media . Animation; 

using System. Windows . Shapes ; 

namespace SilverlightBanner 
{ 

public enum EtatBanniere 
{ 

Publicitel Visible, 
Publicite2 Visible, 
Publicite3Visible 

} 

} 

Ce sont des animations qui vont nous permettre de passer d'un etat a 1' autre. Pour 
naviguer entre 3 etats, il faut 4 animations (ou scenario en l'occurrence, chaque scenario 
contenant une unique animation). 

Ces animations sont : 

DePub3aPub2 ; 
DePub2aPubl ; 
DePublaPub2 ; 
3 DePub2aPub3. 

Ajoutons le code XAML de ces scenarios au fichier XAML de l'interface : 

Les animations de la banniere 

<UserControl x : CI as s=" SilverlightBanner .Page" 

xmlns = "http : / / schema s .microsoft . com/ win fx/ 200 6/xaml /presentation" 
xmlns : x="http : / / schemas .microsoft . com/ win fx/ 2 00 6/xaml" 
Width="500" Height="200"> 
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<Canvas x : Name="LayoutRoot " Background="White"> 



<!--( definition de 1' interface ...)--> 
<Canvas . Resources> 

<Stor yboard x : Name="DePub3aPub2 "> 

<DoubleAnimationUsingKey Frames 
BeginTime="00 : 00 : 00" 
St or yboard. TargetName="PubCanvas3 " 
Storyboard. TargetProperty=" (Canvas . Left) "> 
<SplineDoubleKeyFrame KeyTime="00 : 00 : 00" Value="l 60 " /> 
<SplineDoubleKeyFrame KeyTime=" 00 : 00 : 04 " Value="420"/> 

</DoubleAnimationUsingKeyFrames> 
</Storyboard> 

<Stor yboard x : Name="DePub2aPubl "> 

<DoubleAnimationUsingKey Frames 
BeginTime="00 : 00 : 00" 
Storyboard. TargetName="PubCanvas2 " 
Storyboard. TargetProperty=" (Canvas . Left) "> 
<SplineDoubleKeyFrame KeyTime="00 : 00 : 00" Value="80"/> 
<SplineDoubleKeyFrame KeyTime=" 00 : 00 : 04 " Value="340"/> 

</DoubleAnimationUsingKeyFrames> 
</Storyboard> 

<Stor yboard x : Name="DePublaPub2 "> 

<DoubleAnimationUsingKey Frames 
BeginTime="00 : 00 : 00" 
Storyboard. TargetName="PubCanvas2 " 
Storyboard. TargetProperty=" (Canvas . Left) "> 
<SplineDoubleKeyFrame KeyTime="00 : 00 : 00" Value="340"/> 
<SplineDoubleKeyFrame KeyTime=" 00 : 00 : 04 " Value="80"/> 

</DoubleAnimationUsingKeyFrames> 
</Storyboard> 

<S tor yboard x : Name="DePub2aPub3"> 

<DoubleAnimationUsingKey Frames 
BeginTime="00 : 00 : 00" 
Storyboard. TargetName="PubCanvas3 " 
Storyboard. TargetProperty=" (Canvas . Left) "> 
<SplineDoubleKeyFrame KeyTime="00 : 00 : 00" Value="420"/> 
<SplineDoubleKeyFrame KeyTime=" 00 : 00 : 04 " Value="l 60 " /> 
</DoubleAnimationUsingKeyFrames> 
</Storyboard> 
</ Canvas . Resources> 
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</ Canvas> 
</UserControl> 

C'est ensuite sur les evenements MouseMouve et MouseEnter de chaque Border ToPub qu'il 
faut ajouter le declenchement d'un de ces scenarios. 

Une analyse prealable de la logique applicative semble requise : 

<^ Analyse de la logique applicative de la banniere 

Declarer un etat assigne a PublicitelVisible au demarage de 
1' application 

Declarer un booleen signalant si une animation est de j a en 
cours ou non pour eviter que 2 animations ne demarrent en meme 
temps 
{ 

Ajouter a chaque fin d' animation un evenement modifiant 
ce booleen 

Modifier ce booleen avant chaque appel de la methode Begin 
d' un animation 

} 

Declarer une destination de type EtatBanniere . 

Cette destination est la derniere publicite survolee par la souris 
de 1 ' utilisateur . 

Creer une methode StartNextAnimation qui demare une animation en 
fonction des valeurs etat et destination. 

Appeler cette methode a chaque fin d' animation au cas ou l'etat soit 
actuel different de la destination actuelle 

Lors du survol des Borders ToPub. 
{ 

Assigner la publicite courante comme destination 
Si aucune animation n'est en cours, alors appeler la methode 
StartNextAnimation 

} 
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Code de la logique applicative : 

J^jt Code C# de la banniere 

using System; 

using System. Collections. Generic; 

using System. Linq; 

using System. Net; 

using System. Windows ; 

using System. Windows . Controls ; 

using System. Windows . Documents; 

using System. Windows . Input; 

using System. Windows .Media; 

using System. Windows .Media .Animation; 

using System. Windows . Shapes ; 



namespace SilverlightBanner 
{ 

public partial class Page : UserControl 
{ 

private EtatBanniere etat = EtatBanniere . Publicite3Visible ; 
private bool AnimationEnCour s = false; 
private EtatBanniere destination = 
EtatBanniere. Publicite3Visible ; 

public Page ( ) 
{ 

InitializeComponent ( ) ; 

DePublaPub2 . Completed += new EventHandler (SetEtatToPub2 ) 
DePub2aPubl . Completed += new EventHandler (SetEtatToPubl ) 
DePub2aPub3 . Completed += new EventHandler (SetEtatToPub3 ) 
DePub3aPub2 . Completed += new EventHandler (SetEtatToPub2 ) 

} 

void SetEtatToPubl (obj ect sender, EventArgs e) 
{ 

etat = EtatBanniere . PublicitelVisible; 
AnimationEnCour s = false; 
StartNextAnimation ( ) ; 

} 

void SetEtatToPub2 (obj ect sender, EventArgs e) 
{ 

etat = EtatBanniere . Publicite2Visible; 
AnimationEnCours = false; 
StartNextAnimation ( ) ; 
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} 

void SetEtatToPub3 (obj ect sender, EventArgs e) 
{ 

etat = EtatBanniere . Publicite3Visible; 
AnimationEnCours = false; 
StartNextAnimation ( ) ; 

} 

private void ToPub3 MouseEnter (object sender, MouseEventArgs e) 
{ 

destination = EtatBanniere . Publicite3Visible ; 

if (AnimationEnCours == true) 
return ; 

StartNextAnimation ( ) ; 

} 

private void ToPub2 MouseEnter (object sender, MouseEventArgs e) 
{ 

destination = EtatBanniere . Publicite2Visible ; 

if (AnimationEnCours == true) 
return ; 

StartNextAnimation ( ) ; 

} 

private void ToPubl MouseEnter (object sender, MouseEventArgs e) 
{ 

destination = EtatBanniere . PublicitelVisible ; 

if (AnimationEnCours == true) 
return ; 

StartNextAnimation ( ) ; 

} 

private void StartNextAnimation ( ) 

{ 

if (etat == destination) 
return ; 

AnimationEnCours = true; 

switch (etat) 



as 
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case EtatBanniere . Publicitel Visible : 
DePublaPub2 . Begin ( ) ; 
break; 

case EtatBanniere. Pub li cite 2 Visible : 

if (destination == EtatBanniere . PublicitelVisible) 
DePub2aPubl . Begin ( ) ; 

else 

DePub2aPub3 . Begin ( ) ; 
break; 

case EtatBanniere. Publicite3Visible : 
DePub3aPub2 . Begin ( ) ; 
break; 



La banniere devrait maintenant fonctionner a merveille ; cependant, ce n'est pas le cas. 
Lors de l'execution du premier scenario, la publicite 3 sort du controle Silverlight et 
empiete sur la page ASP.NET (ou HTML) le contenant. 
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Fig. 1.56: Animation sortant du controle Silverlight 

Ce probleme n'est pas un probleme du au code Silverlight mais bien un probleme du au 
code ASP.NET (ou HTML) genere par VisualStudio. 

Dans la page ASP.NET note du projet de developpement Silverlight, remplacez la taille 
du controle Silverlight par With =500 et Height=200 : 
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Page ASP.NET hote d'un projet de developpement Silverlight 



<%@ Page Language="C#" AutoEventWireup="true" %> 

<%@ Register Assembly="System. Web . Silverlight" 
Name space=" System. Web . UI . SilverlightControls " 
TagPref ix="asp" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3 . org/TR/xhtmll/ DTD/xhtml 1- transitional . dtd"> 

<html xmlns="http : //www. w3 . org/19 99/xhtml" style="height : 10 0%; "> 
<head runat=" server "> 

<title>SilverlightBanner</title> 
</head> 

<body style="height : 10 0% ; margin : 0 ; "> 

<form id="forml" runat="server " style="height : 1 00% ; "> 

<asp : ScriptManager ID="ScriptManagerl" runat=" server "> 
</ asp : ScriptManager> 
<div style="height : 100%"> 



<asp : Silverlight ID="Xamll" runat="server" 
Source="~/ClientBin/ SilverlightBanner . xap" 
MinimumVersion="2 . 0 . 31005 . 0" 
Width="100%" Height="100%" /> 

</div> 



</ f orm> 



</body> 
</html> 



La banniere fonctionnera parfaitement. 



c 



I 

It 

c 

o 




Fig. 1 .57 : Banniere etat 3 a 2 
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Fig. 1.58: 

Banniere etat 2 a 
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Fig. 1.59: 

Banniere etat 



1.11 Check-List 

Ce chapitre vous a fourni les bases necessaires a la comprehension d'un fichier XAML. 

Nous avons etudie ici les differents controles et fonctionnalites de base d'une interface 
Silverlight : 

»/ le langage XAML derive du XML ; 

les differents controles de Layout structurants une interface ; 

quelques controles d'affichages d' informations ; 
^ quelques controles de captures d' informations ; 

les bases du Binding ; 

quelques elements de design. 



Enfin, nous avons conclu par la creation complete d'une banniere Silverlight. 
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2.5 Interaction entre Expression Blend et Visual Studio 
2008 

2.6 Check-List 




Creer vos 
applications avec 
Expression Studio 

Dans ce chapitre, vous decouvrirez la nouvelle gamme 
d'outils Microsoft destinee aux graphistes et creatifs. 
Microsoft Expression Studio vous simplifiera la vie lorsque 
vous devrez creer des applications poussees, au niveau 
graphique. Decouvrez I'ensemble de la gamme d'outils 
dans ce chapitre : Expression Design pour la partie 
purement graphique, Expression Web pour tout ce qui 
concerne I'integration de Silverlight et ASP NET dans vos 
pages, Expression Blend pour la partie animation et web 
application, Expression Media et Media Encoder pour 
I'integration de vos videos dans Silverlight. 



Creer vos applications avec Expression Studio 



2.1 Introduction a Expression Studio 

Lorsque vous creez une application, que ce soit pour le Web ou pour toute autre 
plateforme, vous devez veiller a ce que tout soit correctement presente. Le design, 
c'est-a-dire l'interface du produit, influence beaucoup les consommateurs. C'est ainsi 
qu' Apple a, depuis un moment, un succes de plus en plus remarque grace au design 
raffine de ses ordinateurs. 

Jusqu'alors, l'univers des creatifs et des developpeurs etait different. D'un cote, les 
graphistes utilisaient des suites logicielles d'Adobe avec le celebre Photoshop ou 
Illustrator et d'un autre cote, les developpeurs employaient des logiciels de 
developpement comme Visual Studio que vous avez decouvert lors du premier chapitre. 
Ces logiciels n'avaient aucune coherence entre eux, ce qui posait enormement de 
problemes de communication entre creatifs et developpeurs. 

Microsoft, soucieux des methodologies de travail, a done cree une nouvelle suite de 
logiciels appelee Expression Studio. Cette suite est plutot destinee aux creatifs et 
integrateurs. Microsoft a reussi son pari pour ces nouveaux logiciels ; non seulement 
l'interoperabilite avec Visual Studio est parfaite, mais en plus, les creatifs qui ont deja eu 
l'occasion de l'utiliser ne sont pas decus. Seul bemol pour le moment : Expression Studio 
tourne uniquement sur du Windows. Seul Microsoft Expression Media 2 peut fonctionner 
dans un environnement Mac OS. 

Nul doute que tout le monde n'abandonnera pas la suite Adobe mais vous trouverez sur 
Internet une serie d'outils vous permettant de faire la liaison entre la gamme de logiciels 
Adobe et la gamme Expression Studio. 

La suite Microsoft a pour vocation de faciliter la creation de RIA (Rich Internet 
Application). 

(J) Rich Internet Application 

Ce terme est apparu avec la redecouverte d'AJAX. Les applications sont dites riches quand elles 
permettent beaucoup d'interaction avec I'utilisateur. Flash et Silverlight sont orientes vers ce genre 
d'interactions. En effet, comme tout est telecharge du cote du client, on peut avoir des applications web 
tres rapides d I'execution, ce qui permet une tres bonne reactivite et done une bonne interaction avec 
I'utilisateur de I'application. Le mot riche peut aussi etre associe d des interfaces jolies ou encore user 
friendly. Nous verrons dans les prochains sous-chapitres que Expression Studio a tout pour creer ce 
genre d'application. 
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La gamme Expression Studio comprend 5 outils : 

Expression Web ; 
Expression Blend ; 
Expression Design ; 
Expression Media ; 
Expression Encoder 2. 

Les plus utiles, dans le cas de Silverlight, sont Expression Blend, Expression Media et 
Encoder (les deux derniers sont fortement lies). Si vous ne comptez pas tirer parti de la 
puissance de Silverlight pour la video, Expression Blend vous suffira. 

Expression Studio est payant mais vous disposez d'une version devaluation vous 
permettant de tester le produit. Vous pourrez trouver ce produit en magasin, a la FNAC 
par exemple ou chez des partenaires Microsoft. 

(D Un bon exemple d'application realise en XAML 

Un bon exemple d'application realisee en XAML est Expression Studio. En effet, I'ensemble des outils 
de la gamme Expression a ete realise en XAML. 

Partons maintenant a la decouverte de ces 5 outils qui vous serviront tout au long de la 
creation d'une application web Silverlight. 

2.2 Expression Design 

Expression Design est un peu le Photoshop de Microsoft. Bien que plus jeune et moins 
complet, il vous permet de realiser bon nombre d' elements graphiques. Son grand interet 
par rapport a d'autres logiciels, est sa connaissance par defaut du XAML. Comme vous 
l'avez vu, XAML est un langage de definitions d'interfaces vectorielles. Expression 
Design gere uniquement des images vectorielles par defaut, ce qui permet de les convertir 
tres rapidement en XAML. 

Prenons un exemple, si dans Expression Design, vous creez un dessin ainsi : 
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•Unfit edl 




Fig. 2.1 : Expression Design 2 



Si vous voulez creer le meme dessin en XAML, voici a quoi cela ressemblera 

<Canvas 

xmlns="http : / / schema s .microsoft . com/ winfx/2 00 6/ xaml /pre sen tat ion" 
xmlns : x="http : / / schema s .microsoft . com/winf x/2 00 6 /xaml" 
x:Name="Layer_l_0" Width="800" Height="600" Canvas . Left=" 0 " 
Canvas . Top="0"> 
<Rectangle 

Width="345. 983" 
Height="155. 492" 
Canvas.Left="2 53.2 57" 
Canvas. Top=" 17 0. 50 6" 
Stretch="Fill" 
StrokeLine Jo in=" Round" 
Stroke="#FF000000"> 
<Rectangle . Fill> 

<LinearGradientBrush StartPoint="-0 . 0 01 44 93 9, 0 . 5 " 
EndPoint="l . 0 014 5, 0 . 5"> 
<LinearGradientBrush . GradientStops> 

<GradientStop Color="#FF000000" Of f set="0 . 237443"/> 
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<GradientStop Color="#FFF3F025" Offset=" 


0. 


502283" 


/> 


<GradientStop Color="#FFE9Fl 00 " Offset=" 


0. 


589041" 


/> 


<GradientStop Color="#FFED2El 6 " Offset=" 


0. 


776256" 


/> 


</LinearGradientBrush . GradientStops> 








</LinearGradientBrush> 








</Rectangle . Fill> 








</Rectangle> 








<Ellipse 








Width="77 .4962" 








Height="78 . 9961" 








Canvas . Lef t="554 . 7 42 " 








Canvas . Top="12 2 . 50 9" 








Stretch="Fill" 








StrokeLine Join=" Round" 








Stroke="#FF000 00 0"> 








<Ellipse. Fill> 








<LinearGradientBrush StartPoint="-0 . 00653628, 0 


.5 


II 




EndPoint="l . 0 0 654, 0 . 5"> 








<LinearGradientBrush . GradientStops> 








<GradientStop Color="#FF000000" Offset= 


"0 


.237443 


"/> 


<GradientStop Color="#FFF3F025" Offset= 


"0 


. 502283 


"/> 


<GradientStop Color="#FFE9F100" Offset= 


"0 


. 589041 


"/> 


<GradientStop Color="#FFED2El 6" Offset= 


"0 


. 776256 


"/> 


</LinearGradientBrush . Gradients top s> 








</LinearGradientBrush> 








</Ellipse . Fill> 








</Ellipse> 








</ Canvas> 









Imaginez alors combien de temps cela vous prendrait de creer des dessins beaucoup plus 
complexes ? Expression Design est done un outil indispensable a la realisation 
d' interfaces riches. 

Expression Design fait l'objet de livres entiers. Si vous etes habitue a Photoshop, vous 
n'aurez aucun probleme a le prendre en main. 

(J) XAMLvs Images 

Si XAML represente une image, pourquoi ne pas directement prendre cette image et I'ajouter comme 
ressource d notre projet en utilisant la balise XAML Image ? Tout depend du type d'applications que vous 
voulez realiser. Si I'image fait partie integrante de votre interface et que celle-ci soit extensible, vous 
devez la prevoir en XAML. Mais si vous devez afficher une serie d'articles avec des images, il est inutile 
de transformer ces images en XAML. 
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2.3 Expression Encoder 2 

Si vous aimez la video et que vous vouliez utiliser vos videos dans Silverlight, Expression 
Encoder 2 est l'outil dont vous avez besoin. 

Un peu complexe a prendre en main au debut, il vous permet d'effectuer tout le processus 
du debut a la fin, c'est-a-dire de l'encodage de la video a un rendu dans un lecteur 
Silverlight pret a l'emploi. 

Prenons un exemple avec une video WMV. Vous pouvez 1' importer dans Expression 
Encoder a l'aide du bouton import. 



100% " 




Fig. 2.2 : Expression Encoder 



Une fois la video importee, vous pouvez la visualiser a l'aide du lecteur integre au 
programme. Vous avez la possibilite de couper la video comme vous le desirez pour y 
placer des chapitres ou des explications. 

Lorsque votre edition est terminee, vous pouvez regarder toute une serie de parametres a 
droite. Dans le dernier onglet, output, vous avez la possibilite de choisir un lecteur pour 
votre video. II en existe toute une serie et vous pouvez en creer vous-meme de nouveaux 
ou editer les existants en les ouvrant dans Expression Blend a l'aide du petit carre situe 
juste a cote de la liste deroulante. 

Lorsque vous avez termine, cliquez sur Encode et attendez le resultat qui devrait 
s'afficher dans une nouvelle fenetre Internet explorer. 
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Si on regarde la page {C:\Users\VOTRE_USEK\DocumentsXExpressiori\Expression 
EncodeAOutput) qui a ete generee : 

<!DOCTYPE HTML PUBLIC "-/ /W3C//DTD HTML 4.01 Transitional//EN" 
"http: //www.w3c. org/TR/1 9 99/REC-html40 1-1 9 99122 4/loose . dtd"> 
<!-- saved from url= ( 00 14 ) about : internet --> 
<html xmlns="http : //www. w3 . org/19 99/xhtml"> 

<head> 

<script type=' text/ j avascript' src="Microsof tAj ax . j s "></ scrip t> 

<script type=' text/ j avascript' src="Silverlight . j s "></ script> 

<script type=' text/ javascript' src="SilverlightControl . j s"></ script> 

<script type=' text/ javascript' src="SilverlightMedia . j s"></ script> 

<script type=' text/ j avascript' src="ExpressionPlayer . j s"x/script> 

<script type=' text/ j avascript' src=" Player Strings . j s "></ scrip t> 

<script type=' text/ j avascript' src="player . j s"x/script> 

<script type=' text/ j avascript' src="StartPlayer . j s "></ script> 
<titlex/title> 
<style type="text/css"> 

html, body { margin: 0; padding: 0; height: 100% } 

#divPlayer_0 { min-height: 100%; height : 100%; } 
</style> 
</head> 



<body style="background- color : black; margin :0, 0,0,0; overflow : auto ; "> 
<div id="divPlayer_0 "> 

<script type=' text/ j avascript ' > 

var player = new StartPlayer 0(); 

</ script> 
</div> 
</body> 
</html> 



Vous pourrez trouver tous les fichiers JavaScript en rapport dans le meme dossier que le 
fichier Default.html. 

Microsoft Expression Encoder permet egalement de s'enregistrer (voix et son) arm de 
creer vos propres videos filmees par webcam ou camescope. Pour cela, cliquez sur 
l'onglet Live Encoding. Une nouvelle fenetre apparait en overlay. Vous devez choisir la 
source de la video et la source audio et cliquez sur Start. 

Une fois l'enregistrement effectue, vous obtenez un apercu en vous rendant dans l'onglet 
output et en cliquant sur Launch Preview. 
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2.4 Expression Blend 2 

Expression Blend 2 est l'outil le plus puissant pour la realisation d' application 
Silverlight 2. Pour commencer, il vous faudra telecharger le SP1 de Microsoft Expression 
Blend 2 arm d' avoir la possibilite de creer des projets Silverlight 2. Par defaut, Blend 2 
supporte uniquement les projets Silverlight 1, c'est-a-dire les projets Silverlight a base de 
JavaScript. 

Pour pouvez telecharger Microsoft Expression Blend 2 SP a l'adresse suivante : http:// 
www.microsoft.com/downloads/details.aspx?Familyld=EB9B5C48-BA2B-4C39-AlC3-135C60BBBE66&displaylang=en. 




Apres avoir installe le SP1, vous pouvez creer un projet Silverlight 2 en lui donnant un 
nom et en cliquant sur OK. 

Un projet vide s'est cree. Vous pouvez basculer entre l'affiche design ou XAML par les 
onglets verticaux de droite. 

Meme un projet blanc n'est pas tout a fait vide puisque Blend vous prepare directement 
un conteneur de base (Grid) : 

<User Control 

xmlns="http : / /s enemas .microsoft. com/winf x/200 6 /xaml /presentation" 
xmlns : x="http : / /schemas .microsoft. com/winf x/2006/xaml" 
x : Class="SilverlightApplication2 . Page" 
Width="640" Height="480"> 

<Grid x : Name="LayoutRoot" Background="White"/> 
</UserControl> 
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Si on passe a nouveau du cote Design et que Ton ajoute un rectangle, on remarquera que 
le code XAML s'est directement mis a jour : 





Fig. 2.4 : Expression 



<UserControl 

xmlns="http : / / schema s .microsoft . com/ win f x/2 00 6 /xaml /presentation" 
xmlns : x="http : / / schemas .microsoft . com/ win f x/2 006/ xaml" 
x : Class="SilverlightApplication2 . Page" 
Width="640" Height="480"> 

<Grid x : Name="LayoutRoot " Background="White"> 

<Rectangle Height="73" Margin=" 1 17 , 122 , 2 80 , 0 " 

VerticalAlignment="Top" Stroke=" #FF00 00 00 "> 
<Rectangle . Fill> 

<LinearGradientBrush EndPoint="0 .5,1" 
StartPoint="0 . 5, 0"> 
<GradientStop Color="#FF0 00 00 0"/> 
<GradientStop Color="#FF0F2B66" Offset="l"/> 
</ Linear GradientBrush> 
</Rectangle . Fill> 
</Rectangle> 
</Grid> 
</ User Con trol> 



Au niveau des proprietes des elements, on retrouve assez facilement des elements deja 
vus dans Microsoft Expression Design 2. 

Vous pouvez consulter tout les elements XAML disponibles en cliquant sur la double 
fleche a gauche. Par defaut, ils ne sont pas tous affiches. Si vous voulez les afficher tous, 
vous devrez cocher la case en haut a droite Show all. 
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Fig. 2.5 : 

Barre des proprietes 



L' element le plus important de Blend est la colonne Objects and Timeline. Elle vous 
permet de visualiser les elements que vous avez ajoutes a votre projet et surtout de voir 
leur situation dans le projet. En effet, cette colonne represente les elements sous forme 
d'arbre de telle maniere que vous puissiez voir comment les elements sont imbriques les 
uns dans les autres. 



Les noms 

II est tres important de donner des noms d vos elements. C'est ainsi que vous pouvez les retrouver quand 
vous en avez beaucoup sur une meme interface. De la meme maniere, lorsque vous voudrez interagir 
avec ceux-ci par code, vous devrez connaTtre leur nom dans le code. S'ils n'ont pas de noms, on peut 
considerer les elements comme inaccessibles. 
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Objects and Timetfr* 



[UserContro!] 

| • [UserControl] 
| * ■ LayoutRooT" 



Fig. 2.6 : 

Objects and Timeline 



C'est aussi dans cette colonne que vous allez controler les differentes animations de votre 
application. Ainsi, pour animer votre rectangle, il faut cliquer sur le petit bouton en forme 
de plus et donner un nom a votre animation. Vous entrez alors en mode d'enregistrement. 
Vous avez une ligne du temps a gauche et un encadre rouge a droite qui montre la zone 
d'enregistrement. 

Effectuer une animation avec Blend et Silverlight s'avere tres simple, surtout si vous etes 
habitue a jouer avec les memes concepts pour Flash/Flex. 

Tout se fait par point d' arret. Un point d' arret est fixe des que vous deplacez un element. 

Pour creer une animation, placez-vous sur la ligne du temps et deplacez l'element. Pour 
visualiser 1' animation, cliquez sur le bouton Play. 



T Objects and Timeline 








o Storyboardl 








V [UserControl] 


s a 












* * [UserControl] 












> ■ LayoutRoot 
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[| QQ rectangie @ c 
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Fig. 2.7 : Animation dans Expression Blend 2 
Ces actions tres basiques generent du code XAML a l'arriere : 

<UserControl 

xmlns="http : / /schemas . microsoft . com/winf x/2006/xaml/presentation" 
xmlns : x="http : / / schemas . microsoft . com/ win fx/2006/ xaml " 
x: Class="SilverlightApplication2 . Page" 
Width="640" Height="480"> 
<UserControl . Resources> 

<Storyboard x : Name=" Storyboardl "> 

<DoubleAnimationUsingKeyFrames BeginTime=" 00 : 00 : 0 0 " 
Storyboard. Tar getName=" rectangle" 
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Storyboard . TargetProperty=" (UIElement . RenderTransf orm) . 
(Transf ormGroup. Children) [3] . (TranslateTransf orm. Y) "> 
<SplineDoubleKeyFrame KeyTime="0 0 : 00 : 01 " Value="63"/> 
<SplineDoubleKeyFrame KeyTime="0 0 : 00 : 02 " Value="-74 "/> 
</DoubleAnimationUsingKeyFrames> 

<DoubleAnimationUsingKeyFrames BeginTime="00 : 00 : 00" 
Storyboard . Tar getName=" rectangle" 

Storyboard . TargetProperty=" (UIElement . RenderTransf orm) . 
(TransformGroup. Children) [3] . (TranslateTransform.X) "> 

<SplineDoubleKeyFrame KeyTime="0 0 : 00 : 01 " Value="125"/> 
<SplineDoubleKeyFrame KeyTime="0 0 : 00 : 02 " Value="2 44 "/> 
</DoubleAnimationUsingKeyFrames> 

<ColorAnimationUsingKeyFrames BeginTime="00 : 00 : 00" 
Storyboard . Tar getName=" rectangle" 

Storyboard . TargetProperty=" (Shape. Fill) . (GradientBrush . 
GradientStops) [1] . (GradientStop . Color ) "> 
<SplineColorKeyFrame KeyTime="00 : 00 : 01" 
Value="#FF0F2B6 6"/> 
<SplineColorKeyFrame KeyTime="00 : 00 : 02" 
Value="#FFA9BCE4"/> 
</ ColorAnimationUsingKeyFrames> 
</Storyboard> 
</UserControl . Resources> 



<Grid x : Name="LayoutRoot " Background="White"> 

<Rectangle Height="73" Margin="ll 7 , 122 , 280 , 0 " 
VerticalAlignment="Top" Stroke="#FF00 000 0" 
RenderTransf ormOrigin="0 .5,0.5" x : Name=" rectangle "> 
<Rectangle . RenderTransf orm> 
<Transf ormGroup> 

<ScaleTransf orm/> 
<SkewTransf orm/> 
<RotateTransf orm/> 
<TranslateTransf orm/> 
</ Transf ormGroup> 
</Rectangle . RenderTransf orm> 
<Rectangle . Fill> 

<LinearGradientBrush EndPoint="0 .5,1" 
StartPoint="0 .5, 0"> 
<GradientStop Color="#FF000 00 0"/> 
<GradientStop Color="#FF0F2B66" Offset="l"/> 
</LinearGradientBrush> 
</Rec tangle . Fill> 
</Rectangle> 
</Grid> 
</ User Con trol> 
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A la simple vue de ce code, vous vous rendez compte a quel point Expression Blend peut 
etre utile. 

(j) La limite d'Expression Blend 

Si les outils pouvaient generer le code sans faire d'erreurs, nous n'aurions plus besoin d'experts. Tres 
souvent, une intervention humaine est appreciee pour optimiser le code. Tout ceci sera explique dans 
les concepts avances. Retenez que Blend ne remplace pas un code bien ecrit a la main. II est Id pour 
vous simplifier la vie mais tentez de toujours comprendre ce qu'il fait. 



2.5 Interaction entre Expression Blend et Visual Studio 2008 

La plupart du temps, on ne commence pas un projet reel dans Expression Blend ; cela 
pause de nombreux problemes de portabilite de d'organisation par la suite. II arrive 
neanmoins de commencer un projet dans Expression Blend si celui-ci est destine a donner 
un avant-gout du logiciel ou de l'application au client. C'est en effet un tres bon moyen 
de convaincre un client. Vous pouvez facilement etablir la comparaison avec les 
graphistes qui dessinent une interface et la montrer au client avant que tout soit 
implements . 

Les bonnes pratiques veulent qu'on cree d'abord le projet dans Visual Studio. Si vous 
travaillez dans un environnement professionnel avec ces outils, vous devez utiliser une 
solution de gestion de version comme Visual Source Safe ou SVN. Malheureusement, 
Blend n'est pas encore compatible avec ces outils, l'utilisation de Visual Studio 2008 est 
done recommandee. 

Visual Studio ou Visual Developer ne proposent pas une interface d'edition du XAML 
aussi poussee que Expression Blend. Les prochaines versions du logiciel devraient 
apporter des ameliorations a ce niveau. Heureusement, Microsoft a prevu l'utilisation de 
ces deux logiciels en simultane. 

Lorsque vous creez un projet dans Visual Studio, vous avez la possibilite d'editer les 
fichiers XAML directement dans Expression Blend. Pour cela, cliquez du bouton droit sur 
le fichier dont l'extension est xaml. Cela a pour effet d'ouvrir directement Blend. 

La moindre modification d'un cote a des repercutions directes de l'autre. Vous etes 
normalement a jour dans la gestion de vos fichiers. 
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Considerez toujours Visual Studio comme votre outil principal et Expression Blend 
comme un outil de retouche plutot qu'un outil de creation d' application Silverlight. 

Expression Blend ne permet pas de modifier les fichiers contenant la logique metier. Si 
vous cliquez sur la petite croix devant le nom du fichier, vous verrez un sous-fichier ; 
c'est le fichier contenant tout ce qui est dynamique dans 1' application. Seul Visual Studio 
ou votre Bloc-notes vous permet de modifier ces fichiers : 



using 


System; 






using 


System. 


Co llections. Generic ; 


using 


System. 


Linq; 




using 


System. 


Net; 




using 


System. 


Windows 




using 


System. 


Windows 


Controls ; 


using 


System. 


Windows 


Documents; 


using 


System. 


Windows 


Input; 


using 


System. 


Windows 


Media; 


using 


System. 


Windows 


Media . Animation; 


using 


System. 


Windows 


Shapes ; 


namespace SilverlightApplicationl 


{ 

public partial class Page : UserControl 




public Page ( 




} 

} 


InitializeComponent ( ) ; 

} 



Si vous travaillez a deux sur un meme projet, il arrive frequemment qu'une personne 
travaille sur le fichier xaml et 1' autre sur le fichier cs. 

Attention toutefois aux abus ; la plupart du temps, pour avoir un code coherent, il faut une 
interface deja bien definie ; le fichier xaml est sou vent plus avance que le fichier cs qui 
lui est dedie. 

Vous aurez peu l'occasion d'utiliser Expression Web et Expression Media qui ne seront 
pas decrits dans ce livre. Nous pouvons done terminer ce chapitre parenthese pour partir 
a la conquete des donnees. 
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Check-List 2 



2.6 Check-List 

Dans ce chapitre nous avons explore la gamme Expression avec : 

Expression Design ; 
<y Expression Blend ; 
s/ Expression Encoder ; 

L'interaction entre Visual Studio et Expression Blend. 
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Exploiter vos 
sources de 
donnees 

L'acces aux donnees est tres important. Ce chapitre va 
vous montrer comment acceder d tout et n'importe quoi, 
en passant par les bases de donnees : que ce soit 
Microsoft SQL Serveur ou MySQL, ou en allant voir du 
cote des Web services qui sont de plus en plus presents. 
Nous montrerons par la meme occasion comment exposer 
vos donnees en Web service. Nous rentrerons enfin dans 
un autre mode d'acces aux donnees : I'utilisation de 
UNQ. 
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3.1 Utilisez SQL et votre base de donnees 

La majorite des donnees se trouve dans des bases de donnees. Ces dernieres font partie 
d'un systeme de base de donnees (SGBD) parfois different d'une societe a l'autre. 
Silverlight fonctionne tres bien avec SQL Serveur, systeme de base de donnees de 
Microsoft et grand concurrent d' Oracle. 

D'autres SGBD existent comme MySQL, rachete par SUN il y a peu. La liste est longue. 
Ce livre couvrira l'acces en majorite a SQL Serveur, dont vous pouvez trouver une 
version gratuite et utilisable en production : SQL Serveur Express (cf. http://msdn.microsoft 
.com/fr-fr/express/aa718378.aspx). 

Nous aurons egalement des exemples d'utilisations avec MySQL et Oracle qui sont deux 
SGBD fort repondus. Ainsi, vous obtiendrez une vue globale de 1' exploitation des 
donnees avec Silverlight. 

Silverlight, C# et SQL Serveur : introduction 

Ce n'est pas Silverlight qui va acceder aux donnees mais bien C#, langage utilise a 
l'arriere de Silverlight. Si vous n'avez aucune connaissance en C#, nous vous conseillons 
la lecture de 1' annexe 2, Introduction au C#. Autrement, vous ne comprendrez pas ce qui 
va suivre. 

Nous allons voir comment utiliser SQL Serveur. En C#, il existe plusieurs moyens 
d'effectuer des requetes sur SQL Serveur. Pour ce faire, nous avons besoin des elements 
suivants : 

une chaine de connexions permettant de vous authentifier et de cibler la base de 
donnees a attaquer ; 

une connexion qui s'ouvre grace aux parametres places dans la chaine de connexion ; 
une commande qui est une chaine de caracteres representant une requete SQL ; 
un objet pour recuperer les resultats afm de pouvoir les afficher. 

Une fois que nous avons tous ces elements, nous pouvons commencer. 

Tout d'abord, la chaine de connexion. C'est un concept qui reviendra pour les autres 
SGBD egalement. Pour SQL Serveur, elle ressemble a ceci : 

Data Source=PC-MACWIN\SQLEXPRESS; Initial 

Catalog=WipusBD; Persist Security Inf o=True ; User ID=WipusDBManager ; 
Password=WipusManager 
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Cette chaine de connexion, nous devons la sauvgarder dans une variable de type string. 
Ce type de variable est specialement prevu pour accepter les chaines de caracteres : 

string connectionStr ing = @"Data 
Source=PC-MACWIN\SQLEXPRESS ; Initial 

Catalog=WipusBD; Persist Security Info=True; User ID=WipusDBManager ; 
Password=WipusManager " ; 

Une fois cette chaine sauvegardee, nous pouvons l'utiliser pour initialiser une connexion. 
Cela se fait a l'aide de l'objet Sql Connection : 

SqlConnection myConnection; 

myConnection = new SqlConnection (connectionString) ; 
Une fois la connexion initialisee, nous devons l'ouvrir : 

try 
{ 

myConnection . Open ( ) ; 

} 

catch (Exception e) 
{ 

Console . WriteLine (e . ToString ( ) ) ; 

} 

Le try/catch permet de detecter s'il y a eu une erreur lors de la connexion a la base de 
donnee. Si c'est le cas, vous pourrez la gerer dans le catch. Autrement, le code continuera 
a s'executer sans passer dans le catch. 

Avant d'aller plus loin, nous allons proceder a un rappel concernant SQL. 

SQL 

Structured Query Language est un langage qui vous permet d'acceder aux donnees 
situees dans une base de donnees. C'est un langage uniformise qui doit, normalement, 
fonctionner sur tous les SGBD. Cependant, vous trouverez quelques nuances quand vous 
utiliserez SQL Server ou Oracle, ces deux SGBD etant si puissants qu'ils ont ajoute un 
lot de nouvelles fonctionnalites au SQL. 

Sans rentrer dans les details, SQL permet de realiser 4 actions basiques : 
selectionner ; 
supprimer ; 
editer ; 
ajouter. 
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Chaque action que peut effectuer SQL a son mot-cle. Ainsi, pour la selection, on a le 
mot-cle SELECT, pour la suppression, le mot-cle est DELETE, pour editer UPDATE et 
INSERT pour l'ajout dans une base de donnees. 

Pour la selection, outre le mot-cle SELECT, nous devons signifier ce que nous souhaitons 
selectionner (la projection) et le critere de selection sur cette selection. 

Par exemple : Rechercher le nom, le prenom et I 'age des etudiants de deuxieme annee. 

Nous avons ici une projection : nom, prenom et age, ainsi qu'une selection, c'est-a-dire 
le fait de selectionner uniquement les eleves de deuxieme annee. 

Pour la projection, nous avons presque tous les elements pour notre requete : 



SELECT nom, prenom, age 




FROM etudiants 




Pour la selection, nous devons introduire un nouveau mot-cle : 


WHERE : 


SELECT nom, prenom, age 




FROM etudiants 




WHERE annee = 2 





Dans cet exemple, nous ne prenons en compte une seule table. II arrive frequemment de 
devoir aller rechercher une information situee dans plusieurs tables. Imaginez que notre 
base de donnees stocke le cours auquel l'etudiant participe actuellement. Pour cela, il y 
aurait une autre table cours avec une reference vers la table des etudiants. Si vous voulez 
la liste des etudiants se trouvant au cours de maths, nous allons obtenir : 

SELECT etudiants . nom, etudiants . prenom, etudiants . age 

FROM etudiants, cours 

WHERE etudiants. Id = cours. Id 

AND cours. Nom = "Math" 

Cette facon ne represente qu'une maniere de chercher le resultat. Nous pourrions utiliser 
d'autres methodes avec les mots-cles INNER JOIN ou JOIN. 

Pour ce qui est de 1' insertion de nouveaux elements ainsi que de la suppression et 
modification, vous decouvrirez, au long du chapitre, la syntaxe fort proche de la selection. 

Les commandes SQL en C# 

Apres cette petite parenthese sur SQL, nous pouvons continuer avec deux des quatre 
elements de base dont nous avions besoin pour effectuer sur requete sur SQL Serveur. 
Cela se fait a l'aide de l'objet Sql Command : 
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SqlCommand cmd = new SqlCommand ( "SELECT nom, prenom, age " + 
"FROM etudiants " + 
"WHERE annee = 2 " + 
"AND age < 22 ", con) ; 

L'objet SqlCommand prend en parametre une chame de caracteres representant la requete 
SQL ainsi que l'objet connexion que nous avons initialise auparavant (Sql Connection). 

II peut arriver que la requete ait des donnees dites dynamiques. Imaginez par exemple que 
dans votre Silverlight, vous ayez a un moment donne demander l'age maximal des eleves 
que vous voudriez afficher. Cette donnee aura ete sauvee dans une variable de type i nt 
ou short vu que l'age d'une personne depasse rarement les 100 ans. Vous pouvez 
exploiter ces donnees au sein de votre requete : 

SqlCommand cmd = new SqlCommand ( "SELECT nom, prenom, age " + 
"FROM etudiants " + 
"WHERE annee = " + 

"AND age < " + VOTRE VARIABLE ICI, myConnection ) ; 



/!\ Attention aux hackers 

En utilisant cette methode, vous ne vous mettez pas a I'abri des hackers qui pourraient effectuer une 
injection SQL. 

Une injection SQL est une injection de code via un formulaire qui a pour objectif de detourner votre 
requete de son but premier dans I'espoir de corrompre votre systeme de base de donnees. 

Pour eviter cela, vous ne devez jamais placer de parametre directement dans la chaTne de caracteres 
mais preferer I'utilisation de l'objet Sql Parameter. 

Sql Parameter est un objet qui definit un parametre de votre requete. Le parametre est 
designe par un identinant qui mappe les parametres de la requete SQL : 

SqlCommand cmd = new SqlCommand ( "SELECT count (*) " + 

"FROM video " + 
"WHERE Status = " + 
"1 AND Userld = @userld " + 
"AND IdVideo = gldvideo ", con) ; 

SqlParameter pVideoId = 

new SqlParameter ("IdVideo", SqlDbType . Biglnt) ; 
pVideoId. Value = Videold; 
cmd. Parameters .Add (pVideoId) ; 
MembershipUser user = Membership . GetUser () ; 
SqlParameter pUserld = 

new SqlParameter ( "Userld" , SqlDbType . Uniqueldentif ier ) ; 
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pUserld. Value = Userld; 
cmd. Parameters .Add (pUserld) ; 

Ainsi, les attaques SQL ne sont pas possibles. Comme on connait le type qu'on doit 
obtenir, on reduit deja le champ de l'attaque. De plus, il traite automatiquement les 
caracteres tels que 

Pour executer notre requete, nous devons creer un reader. Cet objet va nous permettre de 
lire les resultats de la requete pour les afficher ensuite : 

private static void ReadOrderData ( string connectionString) 
{ 

string queryString = 

"SELECT OrderlD, CustomerlD FROM dbo . Orders ; " ; 
using ( SqlConnection connection = new SqlConnection ( 
connectionString) ) 

{ 

SqlCommand command = new SqlCommand ( 

queryString, connection) ; 
connection . Open ( ) ; 

SqlDataReader reader = command. ExecuteReader () ; 

try 

{ 

while (reader . Read () ) 
{ 

Console .WriteLine ( String . Format (" { 0 } , { 1 } ", 
reader [ 0 ] , reader [ 1 ] ) ) ; 

} 

} 

finally 
{ 

// Always call Close when done reading, 
reader . Close ( ) ; 

} 

} 

} 

(j) Exemple 

Cet exemple provient d'une application console. Etant donne que vous n'avez pas encore les notions 
suffisantes pour ASP.NET, nous avons volontairement limite I'exemple. 

Rendez-vous au chapitre 5, Silverlight et ASP.NET, pour voir comment traiter les donnees correctement. 
Plus loin dans ce chapitre, nous decouvrirons egalement comment fonctionne I'acces direct d une base 
de donnees via Silverlight. 
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Les methodes montrees jusqu'ici ne sont applicables qu'au travers d'un Web service. 
Nous verrons les Web services plus loin dans ce chapitre. Neanmoins, il est rare qu'un 
Web service expose une methode qui renvoie un DataReader. Vous pouvez utiliser la 
fonction suivante : 

/// <summary> 

/// Converts a SqlDataReader to a DataSet 

/// <param name=' reader ' > 

/// SqlDataReader to convert . </param> 

// / <returns> 

/// DataSet filled with the contents of the reader . </returns> 
/// </summary> 

public static DataSet convertDataReaderToDataSet (SqlDataReader reader) 
{ 

DataSet dataSet = new DataSet ( ) ; 

do 

{ 

/ / Create new data table 

DataTable schemaTable = reader . GetSchemaTable () ; 
DataTable dataTable = new DataTable (); 

if (schemaTable != null) 
{ 

// A query returning records was executed 

for (int i = 0 ; i < schemaTable . Rows . Count ; i + + ) 
{ 

DataRow dataRow = schemaTable . Rows [i ] ; 
// Create a column name that is unique 
// in the data table 

string columnName = (string) dataRow [ "ColumnName" ] ; 
//+ "<C" + i + "/>"; 

// Add the column definition to the data table 
DataColumn column = new DataColumn ( columnName, 
(Type) dataRow ["DataType" ] ) ; 
dataTable . Columns .Add ( column) ; 

} 

dataSet. Tables. Add (dataTable) ; 

// Fill the data table we just created 

while (reader . Read () ) 
{ 

DataRow dataRow = dataTable . NewRow () ; 
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for (int i = 0 ; i < reader . FieldCount; i++) 
dataRow[i] = reader . GetValue (i) ; 






dataTable.Rows.Add(dataRow) ; 

} 




} 

else 




i 


/ / No records were returned 




} 


DataColumn column = new DataColumn ( "RowsAff ected" ) ; 

dataTable . Columns .Add ( column ) ; 

dataSet. Tables. Add (dataTable) ; 

DataRow dataRow = dataTable . NewRow () ; 

dataRow[0] = reader . RecordsAff ected; 

dataTable. Rows. Add (dataRow) ; 


} 


} 

while 
return 


( reader . NextResult ( ) ) ; 
dataSet; 



3.2 Exploitez vos donnees sur Oracle 

Oracle est une base de donnees reconnue au niveau mondiale. Elle est utilisee par les plus 
grandes societes. C'est un concurrent de SQL Serveur. 

Elle permet d'etre configuree pour supporter de grosse consommation de donnees. 

Le but de cette section n'est pas d'apprendre a utiliser Oracle mais de reussir a exploiter 
les donnees d' Oracle directement en C#. II vous faudra par la suite creer un Web service 
et attaquer votre Web service dans votre application Silverlight pour pouvoir recolter les 
donnees. 

Avant de commencer, vous devez installer les outils Oracle pour Visual Studio 2008 
disponibles a cette adresse : http://www.oracle.com/technology/software/tech/windows/odpnet/. 

Vous pouvez egalement telecharger ODP.NET {Oracle Data provider) qui sera utilise 
dans cette section. Vous le trouverez a 1' adresse suivante : http://www.oracle.com/technology/ 
software/tech/windows/odpnet/index.html. 

Dans votre projet .NET, n'oubliez pas d'ajouter la reference a la DLL d'Oracle : 

using Oracle . DataAccess . Client; // C# 
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Vous pouvez ensuite vous connecter a la base de donnees Oracle via sa chaine de 
connexion qui doit ressembler a ceci : 

OraDb= 

(DESCRIPTION 
(ADDRESS_LIST= 

(ADDRESS= (PROTOCOL=TCP) (HOST=OTNSRVR) (PORT=1521)) 

) 

(CONNECT_DATA= 

( SERVER=DEDICATED) 
(SERVICE_NAME=ORCL) 

) 

) 



II faut done placer cette chaine de connexion dans une variable arm de pouvoir l'utiliser 
plus tard dans le programme : 



string 


oradb = 


"Data Source= ( DESCRIPTION=" 


+ 


" (ADDRESS 


LIST= (ADDRESS= (PROTOCOL=TCP) (HOST=ORASRVR) (PORT=1521 ) ) ) " 


+ 


" (CONNECT 


DATA= (SERVER=DEDICATED) (SERVICE NAME=ORCL) ) ) ;" 


+ 


"User Id= 


scott; Password=tiger ; " ; 



Une fois la chaine sauvee, vous pouvez creer une connexion a partir de cette chaine de 
la maniere suivante : 

OracleConnection conn = new OracleConnection (oradb) ; 
Ou si vous preferez : 

OracleConnection conn = new OracleConnection ( ) ; 
conn . ConnectionString = oradb; 

Et comme vous le feriez pour SQL Serveur, ouvrir la connexion : 

conn . Open ( ) ; 

La suite est pratiquement la meme que ce que vous connaissez avec SQL Serveur. Vous 
devez creer une commande : 

string sql = "select dname from dept where deptno = 10"; // C# 
OracleCommand cmd = new OracleCommand ( sql, conn) ; 
cmd. CommandType = CommandType . Text; 
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Et utiliser un Reader pour aller rechercher les resultats : 

OracleDataReader dr = cmd . ExecuteReader ( ) ; 
dr . Read ( ) ; 

labell.Text = dr [ "dname" ]. ToString () ; 
// C# retrieve by column name 
labell.Text = dr . GetString ( 0 ). ToString () ; 

// return a . NET data type 
labell.Text = dr . GetOracleString ( 0 ). ToString () ; 
/ / return an Oracle data type 

On peut alors prendre les valeurs du Reader : 

labell.Text = dr . Getlntl 6 ( "deptno" ). ToString () ; 

Et terminer la connexion proprement, comme nous l'aurions fait avec SQL Serveur : 

conn . Close ( ) ; 
conn . Dispose ( ) ; 

Voici une meilleure facon de faire lorsqu'on voit le code dans son ensemble : 

using (OracleConnection conn = new OracleConnection (oradb) ) 
{ 

conn . Open ( ) ; 

OracleCommand cmd = new OracleCommand () ; 
cmd . Connection = conn; 
cmd . CommandText = 

"select dname from dept where deptno = 10"; 
cmd . CommandType = CommandType . Text; 

OracleDataReader dr = cmd. ExecuteReader () ; 
dr. Read () ; 

labell.Text = dr . GetString ( 0 ) ; 

} 

/j\ Gestion d'erreur 

Lorsque vous programmez, n'oubliez jamais de traiter correctement les erreurs, notamment I'ouverture 
d'une connexion. 
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Pour gerer efficacement les erreurs, utilisez try catch : 



try 



conn . Open ( ) ; 

OracleCommand cmd = new OracleCommand () ; 
cmd . Connection = conn; 

cmd . CommandText = "select dname from dept where deptno = " + 

textBoxl . Text; 
cmd . CommandType = CommandType . Text; 



} 

} 

catch (Exception ex) // catches any error 
{ 

MessageBox . Show (ex .Message . ToString ( ) ) ; 

} 

finally 
{ 

// In a real application, put cleanup code here. 



Le provider Oracle fournit une serie d'erreurs que vous pouvez interpreter a l'aide de 
l'objet OracleException : 

catch (OracleException ex) // catches only Oracle errors 
{ 

switch (ex. Number) 
{ 



case 1 : 

MessageBox . Show ( "Corruption clef primaire"); 
break; 
case 12545: 

MessageBox . Show ( "La base de donnees ne repond pas."); 
break; 
default : 

MessageBox . Show ( "Autre erreur: " + ex .Message . ToString ()) ; 
break; 



if (dr.ReadO) // 



C# 



labell.Text = 

// 



dr [ "dname" ] . ToString ( ) ; 

or use dr . GetOracleString (0 ). ToString ( ) 



catch (Exception ex) // catches any error 
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{ 

MessageBox . Show (ex . Message . ToString ( ) ) ; 

} 

Si vous effectuez une requete qui rapatrie plusieurs elements, utilisez la methode Read du 
DataReader : 

while ( dr. Read () ) // C# 
{ 

listBoxl . Items .Add ( "The " + 

dr ["dname"] .ToString () + 
" department is in " + 
dr ["loc"] .ToStringO ) ; 

} 

Voila notre introduction a l'acces aux donnees via Oracle terminee. II y a bien entendu 
beaucoup plus de choses a faire avec cette DLL mais ce n'est pas l'objectif de notre livre. 

Reportez-vous a Vannexe 3, Webographie, pour obtenir les liens qui vous guideront 
vers de I'information sur le sujet. 

3.3 MySQL etSilverlight 

MySQL est une base de donnees tres repandue. Elle est souvent combinee a des projets 
PHP. Si vous etes habitue a PHP et MySQL, nous vous conseillons la lecture du tutorial 
suivant : http://nico-pyright.developpez.com/tutoriel/vs2008/csharp/silverlightandmysql/. 

Sur le site de MySQL, vous trouverez assez facilement un provider pour .NET. 

MySQL n'est pas fort different d'Oracle et SQL Serveur dans la maniere de rechercher 
les donnees. Le nom des objets va vite vous donner une idee de son fonctionnement : 

private MySqlConnection conn; 
private DataTable data; 
private MySqlDataAdapter da; 

private System. Windows . Forms . DataGrid dataGrid; 
private MySqlCommandBuilder cb; 

Nous avons egalement besoin d'une chaine de connexion : 

string connStr = String . Format ( "server= { 0 }; user " + 

"id={l}; password= { 2 } ; database=mysql ; pooling=f alse" , 
server. Text, userid.Text, password. Text ); 
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La chaine de connexion est plus petite que pour Oracle et SQL Serveur. C'est quasiment 
la seule chose qui changera dans notre code. Apres avoir enregistre cette chaine de 
connexion, nous pouvons l'ouvrir : 

try 
{ 

conn = new MySqlConnection ( connStr ) ; 
conn . Open ( ) ; 

GetDatabases () ; 

} 

catch (MySqlException ex) 
{ 

MessageBox . Show ( "Error connecting to the server: " + ex. Message ) ; 

} 

Nous pouvons ensuite declarer une commande et l'executer : 

MySqlDataReader reader = null; 

conn . ChangeDatabase ( databaseList . Selectedltem . ToString ( ) ) ; 

MySqlCommand cmd = new MySqlCommand ( "SHOW TABLES", conn); 

try 

{ 

reader = cmd. ExecuteReader ( ) ; 
tables . Items . Clear ( ) ; 
while ( reader . Read () ) 
{ 

/ / traitement 

} 

catch (MySqlException ex) 

MessageBox. Show ( "Failed to populate table list: " + ex. Message ); 
finally 

if (reader != null) reader . Close () ; 

Nous avons vu ici comment changer la base de donnees concernee par la requete, ce qui 
ne peut pas se faire dans les autres providers. Vous devrez, a chaque fois, utiliser une 
chaine de connexion differente pour chaque base de donnees. 
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Vous avez aussi la possibility d'utiliser des DataTable : 



data = new DataTable (); 




da = new MySqlDataAdapter ( "SELECT * 


FROM " + 


tables . Selectedltem 


. ToStringO, conn ) ; 


cb = new MySqlCommandBuilder ( da ) ; 




da. Fill ( data ) ; 




dataGrid. DataSource = data; 





C'est a peu pres tout ce que vous devez connaitre sur les connexions a un serveur MySQL. 

3.4 LINQ 

LINQ est apparu avec le Framework 3.0 de la plateforme .NET. II a vite ete apprecie par 
les developpeurs pour la facilite qu'il apporte et sa merveilleuse integration dans Visual 
Studio 2008. 

LINQ a su plaire aux developpeurs qui avaient 1' habitude d'aller rechercher leurs donnees 
dans des bases de donnees : SQL Serveur dans un premier temps. II existe maintenant 
profusion de providers qui permettent de connecter d'autres SGBD. En effet, meme si le 
SQL est un langage de choix, il n'existe pas de compilateur qui sache reperer une erreur 
dans notre syntaxe SQL. II n'existe pas non plus d'lntelliSense pour SQL. 

Ce n'est evidemment pas la seule raison de ce succes. LINQ est tres facile a prendre en 
main. En effet, sa syntaxe est simple et ressemble beaucoup au SQL. Voyez par 
vous-meme l'exemple d'un projet LINQ to Object : 

using System; 

using System. Collections. Generic ; 
using System. Linq; 
using System. Text; 

namespace LINQ 
{ 

class Program 
{ 

static void Main ( string [ ] args) 
{ 

string[] names = { "Burke", "Connor", "Frank", 
"Everett", "Albert", "George", 
"Harris", "David" }; 
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IEnumerable<str ing> query = from s in names 

where s . Length == 5 
orderby s 

select s . ToUpper ( ) ; 

foreach (string item in query) 
Console . WriteLine ( item) ; 

Console . ReadLine ( ) ; 

} 

} 

} 

Nous retrouvons les differents elements qui constituent une requete SQL : 

From ; 
Where ; 
Order by, etc. 

II existe de nombreux projets LINQ. La communaute .NET s'est emparee du projet pour 
l'etendre a d'autres sources de donnees. Voici un tableau recapitulatif et non exhaustif des 
differents projets LINQ : 

Tableau 3.1 : Liste des providers LINQ 



Provider 


Description 


LINQ to Object 


Permet d'utiliser LINQ sur des collections d'objets. 


LINQ to SQL 


Permet d'utiliser LINQ avec une source de donnees relationnelles (SQL 
Serveur pour le moment). 


LINQ to XML 


Utilise pour manipuler des sources XML 


LINQ to DataSet 


Un provider pour utiliser LINQ avec des DataSets 


LINQ to Entities 


LINQ s'appuyant sur un modele d'entite 


LINQ to Amazon 


Providers pour attaquer les donnees d'Amazon 


LINQ to Active Directory 


Providers pour contacter Active Directory 


LINQ to Bindable Sources 


Permet de facilement la gestion des etats d'une application. 


LINQ over C# 


Permet de passer du C# d I'aide de LINQ. 


LINQ to CRM 


Providers pour CRM 
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Tableau 3.1 : Liste des providers LINQ 



1 IN 1(0 f^^r, 

LIIN<oi to \jeo 


LINQ pour manipuler des donnees geo spatiales 


LIINW to excel 


LINQ pour manipuler des tableaux Excel 


LINQ to Expressions 


Permet de manipuler des arbres en utilisant LINQ. 


1 IKir^t Pk^-LP 
LIlNW to rllCKK 


Permet d'aller rechercher des informations sur un compte FlickR. 


iikio r^r-^l^ 
liin^ to Google 


LINQ pour requeter Google 


LINQ to Indexes 


Permet d'ajouter la notion d'index d LINQ. 


LINQ toJSON 


Pour manipuler JSON d I'aide de LINQ 


LINQ to NHibernate 


Permet de faire le pont entre LINQ et NHibernate. 


LINQ to JavaScript 


Permet d'utiliser LINQ dans du JavaScript. 


IINQ to IDAP 

Lll NVJx IU LUr\\ 


Porm ot Ho mnnini i or iin rvn ni ii"ti ro M) A P nx/Of" rs. (0 

1 til 1 1 1 t?l U t? IMUIIIUUItM UN \Jl 1 l IUU 1 1 1/ LL-TAI U V t?U Lll N VJx . 


IINQ to IIRIQen Pro 

Lll NVJx IU LLULv^Cl 1 1 IU 


Porm ot H otonH ro Mf 0 \r~\ Si 0 1 r~in qo on r~ hr~i rno Ho nh i c; Ho 

1 Cllllfcrl U fcilcl IU. 1 fci Lll n VJx IU OVJx L \ Ul 1 oc til 1 U 1 IU 1 U ti U ti Ul Uo Uc 

fonctionnalites venant de SQL). 


LINQ to Lucene 


LINQ pour la manipulation de chaTnes de caracteres 


IINICo tn AAotnwoh 

Lll NVJx IU / V \CILJ VVCLJ 


NfO pirii ir F rooKn qo 

Lll NVJx UUUI 1 ItitiUUoti 


LINQ to MySQL, Oracle et 

Pnstf^reSnl 


LINQ pour Oracle, MySQL et PostGreSql (implementation de LINQ to 
SQI 91 


1 INO to NCnver 

Lll NVJx IU 1 Nv^UVcl 


UNO nnnr KIPnx/or 
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IINQ to OnH 
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1 INQ to Parallel 
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LINQ. 


LINQ to RDF File 


Comme son nom I'indique, permet de manipuler des fichiers RDF d 

l'^.;^l^ 1 IKI(0 

1 aiae ae ui\|<o;. 


LINQ to SharePoint 


Permet de manipuler les listes SharePoint avec LINQ. 


LINQ to SimpleDB 


LINQ to SQL pour Amazon SimpleDB 


LINQ to Streams 


Manipulation de donnees de streaming avec LINQ 


LINQ to WebQueries 


Permet de traiter le Web comme une base de donnees. 


LINQ to WMI 


LINQ pour WMI 


LINQ to XtraGrid 


LINQ pour manipuler les grids 
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Le tableau parle de lui-meme, il existe a ce jour enormement de providers pour LINQ. 
Nous n'allons pas les detailler tous dans ce livre. 

LINQ, un peu d' explication 

Pour comprendre comment fonctionne LINQ, nous devons reprendre notre exemple et le 
decomposer : 

IEnumerable<string> query = from s in names 

where s. Length == 5 
orderby s 

select s . ToUpper () ; 

La premiere chose qui choque, lorsque nous rencontrons une requete LINQ, ce sont les 
nouveaux mot-cles : 

■ from ; 
where ; 
orderby ; 
select, etc. 

Ces mots-cles ont ete introduits dans le Framework 3.0. Lorsque le compilateur tombe sur 
ces mots-cles, il transforme tout en succession de methodes : 

IEnumerable<string> query = names 

.Where (s => s . Length == 5) 

.OrderBy(s => s) 

. Select (s => s .ToUpper ()) ; 

Nous n'allons pas nous eterniser sur le sujet tant il est vaste. Nous verrons juste un 
exemple d' utilisation de LINQ to XML qui nous permettra de manipuler du XAML. 

LINQ to XML par I'exemple 

Notre exemple est assez basique. Recuperer du XAML d'un Web service et l'utiliser avec 
LINQ to XML pour l'injecter dynamiquement dans notre code. C'est un exemple assez 
courant lorsqu'on apprend ASP.NET ; nous allons ici l'adapter a Silverlight. 

Nous creerons done une application Silverlight munie uniquement d'un StackPanel . Dans 
cet element, nous viendrons charger dynamiquement du contenu : 

<UserControl x:Class="HDI Silverlight LinqandXaml si cs.Page" 

xmlns = "http : / / schema s .microsoft . com/winf x/2 00 6 /xaml /presentation" 
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xmlns : x="http : / / schemas .microsoft . com/ win f x/2 00 6/ xaml" 
Width="400" Height="300" Loaded="UserControl_Loaded"> 
<Grid x : Name="LayoutRoot" Background="White"> 

<StackPanel VerticalAlignment="Top" x : Name=" stkMenu" 
Orientation="Horizontal"x/StackPanel> 

</Grid> 
</UserControl> 

Dans le code attache a notre fichier XAML, nous allons instancier un objet qui se 
connectera au Web service que nous verrons plus tard : 

using System; 

using System. Windows ; 

using System. Windows . Controls ; 

using System. Xml . Linq; 

namespace HDI Silverlight LinqandXaml si cs 
{ 

public partial class Page : UserControl 
{ 

public Page ( ) 
{ 

InitializeComponent ( ) ; 

} 

private void UserControl Loaded (obj ect sender, RoutedEventArgs e) 
{ 

MenuServiceRef erence .MenuServiceClient msc = 

new MenuServiceRef erence .MenuServiceClient ( ) ; 

msc . GetMenuItemsCompleted += 

new EventHandler<MenuServiceRef erence . GetMenuItems 
CompletedEventArgs> 

(msc GetMenuItemsCompleted) ; 

msc . GetMenuItemsAsync ( ) ; 

} 

void msc_GetMenuItemsCompleted (obj ect sender, 

MenuServiceRef erence . GetMenuItemsCompletedEventArgs e) 

{ 

foreach (XElement xe in e. Result) 
{ 

stkMenu . Children .Add (System. Windows . Markup . XamlReader . Load 
(xe.ToStringO ) as UIElement); 

} 

} 
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} 

} 

Toujours le meme fonctionnement. On va rechercher le contenu et on appelle une 
methode une fois le contenu telecharge. 

Si on regarde au niveau de notre Web service, nous avons une interface : 

using System. Collections. Generic; 
using System. ServiceModel; 
using System. Xml . Linq; 

namespace HDI Silverlight LinqandXaml web cs 
{ 

[ServiceCon tract] 
public interface IMenuService 
{ 

[OperationContract] 
List<XElement> GetMenuItems () ; 

} 

} 

Cette interface ne definit qu'une methode. Cette methode est completee dans la classe qui 
implemente 1' interface : 

using System. Collections. Generic; 
using System. Linq; 
using System. Xml . Linq; 

namespace HDI Silverlight LinqandXaml web cs 
{ 

public class MenuService : IMenuService 
{ 

public List<XElement> GetMenuItems ( ) 
{ 

List<XElement> menuelementlist = new List<XElement> ( ) ; 
XNamespace xmlns = 

"http : / / schema s . microsoft . com/ client/2007"; 

var elements = 

from x in DataBaseClass . GetDataElements ( ) 
select new XElement (xmlns + x . ElementType, 
new XAttribute ("Width", x. Width), 
new XAttribute ( "Height", x. Height), 
new XAttribute ( "Content" , x. Content)); 



131 



3 



Exploiter vos sources de donnees 



menuelementlist = elements . ToList<XElement> () ; 



return menuelementlist; 



C'est dans ce fichier que Ton voit l'utilisation de LINQ to XML. LINQ va rechercher les 
donnees dans une classe DataBaseCl ass : 

using System; 

using System. Collections. Generic ; 
using System. Linq; 
using System. Web; 

namespace HDI Silverlight LinqandXaml web cs 
{ 

public static class DataBaseClass 
{ 

public static List<DataElement> GetDataElements ( ) 
{ 

List<DataElement> 1st = new List<DataElement> ( ) ; 

lst.Add(new DataElement { ElementType = "Button", 

Width = "100", 
Height = "50", 
Content = "Menu Item 1" }); 

lst.Add(new DataElement { ElementType = "Button", 

Width = "150", 
Height = "50", 
Content = "Menu Item 2" }); 

lst.Add(new DataElement { ElementType = "Button", 

Width = "100", 
Height = "50", 
Content = "Menu Item 3" }); 

return 1st; 



public class DataElement 
{ 

public string ElementType { get; set; } 

public string Width { get; set; } 

public string Height { get; set; } 

public string Content { get; set; } 

} 
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Cette classe fait office de base de donnees. On aurait pu imaginer aller rechercher l'objet 
dans une base de donnees. 

Une fois le Web service termine, nous devons ajouter une reference dans notre projet 
Silverlight, ce qui cree un fichier ServiceReference.config : 

<conf iguration> 

<system. serviceModel> 
<bindings> 

<basicHttpBinding> 

<binding name="BasicHttpBinding IMenuService" 
maxBuf ferSize="2147 483 64 7" 
maxReceivedMessageSize="214 74 83 64 7"> 
<security mode="None" /> 
</binding> 
</basicHttpBinding> 
</bindings> 
<client> 

<endpoint address="http : / /localhost : 71 07 /Menu Service . svc" 
binding="basicHttpBinding" 
bindingConf iguration="BasicHttpBinding IMenuService" 

contract="MenuServiceRef erence . IMenuService" 
name="BasicHttpBinding IMenuService" /> 
</client> 
</ system. serviceModel> 
</ conf iguration> 

L'exemple est termine. II vous reste a declarer un tag Silverlight dans une page pour tester 
votre code : 

<%@ Page Language="C# " AutoEventWireup="true" %> 

<%@ Register Assembly="System. Web . Silverlight" 
Namespace="System. Web . UI . SilverlightControls" 
TagPref ix="asp" %> 

<!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www . w3 . org/TR/xhtmll/ DTD/xhtml 1- transitional . dtd"> 

<html xmlns="http : //www. w3 . org/19 99/xhtml" style="height : 10 0%; "> 
<head runat="server"> 

<title>HDI-Silverlight-LinqandXaml-sl-cs</ title> 
</head> 

<body style="height : 10 0% ; margin : 0 ; "> 

<form id="forml" runat="server " style="height : 10 0% ; "> 
<asp: ScriptManager ID="ScriptManagerl" 
runat="server"x/asp : ScriptManager> 
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<div style="height: 100%; "> 




<asp: Silverlight ID="Xamll" runat=" 


server" 


Sour ce="~ /CI ientBin/HDI -Silver light 


-LinqandXaml-sl-cs . xap" 


MinimumVersion="2 . 0 . 31005 . 0" Width= 


"100%" 


Height="100%" /> 




</div> 




</f orm> 




</body> 




</html> 





Nous pouvons maintenant passer a la partie Web service qui vous permettra de mieux 
comprendre comment les exemples precedents fonctionnent. 

LINQ est tres complexe et le Framework a du connaitre beaucoup de modification et 
d'ajout pour permettre 1' utilisation de LINQ. 

Reportez-vous a I'annexe 3, Webographie, si vous souhaitez plus (('information sur 
I'utilisation de LINQ. 

Aujourd'hui, le provider LINQ le plus utilise est LINQ to Entities. II vous permet de vous 
connecter a votre base de donnees et traiter les donnees de celle-ci comme si s'agissait 
d'objets que vous avez l'habitude de manipuler dans vos programmes. 

3.5 Les Web services 

Les Web services sont apparus avec le Web 2.0. C'est l'une des meilleures choses qui soit 
arrive au Web. lis permettent d'exposer des donnees dans un format standard afin que tout 
le monde puisse les utiliser. C'est l'optique du Web 2.0 ; celle du partage dans tous les 
sens du terme. 

On voit pourtant encore trop de sites web se fermer sur eux-memes alors qu'une bonne 
API permet de creer un systeme d' applications qui gravite autour. C'est le cas de Twitter 
ou encore Flickr qui grace a leur API se voient utiliser par de nombreuses autres 
applications qui ajoutent des fonctionnalites a un service deja existant. 

Vient le probleme de rentabilite. Exposer des donnees pour que d' autres les consommes 
coute enormement d' argent. Microsoft propose done certain de ces Web services payants, 
comme Live Earth, pour des utilisations a grande echelle. 

Ce qui est certain, c'est que le modele economique du Web 2.0 n'est pas encore tres clair. 
Peu importe, ces Web services sont la et il faut que vous sachiez les exploiter dans vos 
applications Silverlight. Voire meme creer vous-meme vos Web services pour consommer 
vos donnees plus facilement. 
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Le Framework .NET propose plusieurs types de Web services. Pour comprendre, il faut 
un petit historique. En fait, avant l'arrivee de Silverlight et du Framework 3.0, les Web 
services se creaient avec ASP.NET sous forme de fichier asmx. Depuis, Microsoft a 
introduit WCF (Windows Communication Foundation). Cette nouvelle brique du 
Framework permet de creer des Web services respectant des normes qui ne sont plus 
seulement les normes de Microsoft mais des normes appliquees un peu partout sur le 
Web. Ce qui a pour but de creer un Web interoperable, c'est-a-dire ou la technologie 
utilisee n'influence plus les donnees qu'elle peut manipuler. Ainsi, si WCF expose des 
donnees, du code PHP sera capable d'aller rechercher 1' information, etc. De la meme 
maniere, du code JV£T pourra recuperer de 1' information en provenance de PHP ou Ruby. 
C'est ce qui se passe lorsque vous contactez I'API Twitter puisque Twitter et son API sont 
developpes en Ruby et pourtant, .NET sait facilement lire les donnees exposees sur I'API. 

Dans l'exemple qui va nous servir d'apprentissage, nous allons creer deux Web services 
differents. Un en ASP.NET, meme si vous n'avez pas encore eu le temps de lire le chapitre 
d' introduction. Un autre, en WCF, qui exposera des donnees simples et complexes, que 
nous devrons exploiter dans notre application Silverlight. 

Vous devez done creer une application Silverlight dans Visual Studio. Visual Studio vous 
demande ensuite si vous souhaitez attacher un projet ASP.NET a votre projet Silverlight. 
C'est le cas ici. Dans ce projet ASP.NET, nous devons ajouter un fichier ASMX (fichier de 
Web service) : 



Ajouter un nouvel element - C:\Usets\LHome\Desktop\WCF\WebServicesApp_Web\ I V II E3 



00) 





i.iuaeiei visual muqid insianes 






^Application Silverlight 


i^PageJScript Silverlight 


Qj Web Form 


1 Page martre 


M Controle utilisateur Web 


4 ADO.NFJ Entity Data Model 


s_2 Assistant Rapport 


j Base de donnees SQL Server 


-jjBibliotheque clienteAJAX 


'fj Champ Dynamic Data 


<*3 Classe 


.^1 Classe d'application globale 


^Classes UNQto SQL 


jJCcmportement client AJAX 


ilj Controle client AJAX 


[§ DataSet 


^ Diagramme de classes 


AjFeuille de style 


Fichier browser 


■^Fichier d'apparence 


j Fichier de configuration Web 


ijjj Fichier de ressources 


Fichier JScript 


Jj) Fichier texte 


^ Fichier XML 


0 Fichier XSLT 


diFormulaire Web AJAX 


^] Gestionnaire generique 


_-|Page HTML 


J]Pagemaitre AJAX 


Ua\ Plan de site 


^ Rapport 


Rapport Crystal 


|A| Schema XML 


- : £5ervice de donnees ADO.NET 


3r| Service WCF 


3§ Service WCF compatible AJAX 


^Service WCF Silverlight 


^Service Web 


Classe concue de maniere graphique pou 


la creation d'un service Web 





Nom : Web Service. asmx 



Langage ; Visual C- * | [yf] Placer le code dans un fichier distinct 

n Selectionner la page martre 



| Ajouter | | Annuler | 



Fig. 3.1 : Creation d'un Web service 



135 



3 



Exploiter vos sources de donnees 



(J) Web service WCF M 

Sur la meme image, on remarque la presence d'un fichier WCF. Lorsque vous creerez un fichier SVC 
{Web service WCF], vous devrez revenir sur le meme ecran et selectionner Web service WCF. 

Vous avez done un nouveau fichier dans votre projet : 

<%@ WebService Language="C#" 

CodeBehind=" ~/App Code/ SimpleAsmx . cs " 
Class="SimpleAsmx" %> 

Ce fichier fait reference a un autre fichier situe dans App_Code. Si ce fichier n'existe pas, 
creez-le. Ce fichier definira les differentes methodes que notre Web service expose : 

using System; 

using System. Collections ; 

using System. Linq; 

using System. Web; 

using System. Web. Services; 

using System. Web . Services .Protocols ; 

using System. Xml . Linq; 

/// <summary> 

/// Summary description for SimpleAsmx 
/// </ summary> 

[WebService (Namespace = "http://tempuri.org/")] 
[WebServiceBinding 

(ConformsTo = WsiProf iles . BasicProf ilel_l ) ] 
// To allow this Web service to be called from script, 
// using ASP.NET AJAX, uncomment the following line. 
/ / [ System. Web . Script . Services . ScriptService ] 
public class SimpleAsmx 
: System . Web . Services . WebService 

{ 

public SimpleAsmx () 
{ 

//Uncomment the following line if using 
//designed components 
/ /InitializeComponent ( ) ; 

} 

[WebMethod] 

public string HelloWorldO 
{ 
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return "Hello World"; 

} 

[WebMethod] 

public string SayHelloToMe ( string name) 
{ 

return string . Format ( "Hello {0}, how are you?", name); 

} 

} 

Nous avons ici deux methodes exposees. Pour exposer une methode, il suffit de lui 
appliquer un attribut WebMethod. La premiere fonction fait un celebre Hello World et la 
deuxieme prend un parametre et demande a l'utilisateur comment il va. 

Notre Web service ASP.NET est termine. Nous pouvons faire la meme chose pour WCF. 
De la meme maniere, vous allez voir apparaitre dans votre projet un nouveau fichier dont 
1' extension est svc : 

<%@ ServiceHost Language="C# " 
Debug="true" 
Service="SimpleWCF" 

CodeBehind="~/App_Code/SimpleWCF. cs" %> 

Ce fichier fait reference a un fichier code dans App_Code comme pour le Web service 
ASP.NET : 

using System; 

using System. Collections. Generic; 
using System. Linq; 

using System. Runtime . Serialization; 
using System. ServiceModel; 
using System. Text; 

// NOTE: If you change the class name "SimpleWCF" 
// here, you must also update the reference to 
// "SimpleWCF" in Web.config. 
public class SimpleWCF : ISimpleWCF 
{ 

fregion ISimpleWCF Members 

public string SayHelloToMe ( string name) 
{ 

return string . Format ( "Hello {0}, how are you today?", name) ; 

} 
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ftendregion 






fregion ISimpleWCF Members 






public List<Person> GetPeople ( ) 






{ 

List<Person> ppl = new List<Person> ( ) ; 






ppl . Add (new Person () { FirstName = "Tim", 

}); 


LastName = "Heuer" 




ppl. Add (new Person () { FirstName = "Zane", 
}) ; 


LastName = "Heuer" 




ppl. Add (new Person () { FirstName = "Steve" 
"Ballmer" } ) ; 


, LastName = 




return ppl; 

} 




} 


#endregion 





Nous avons ici deux methodes. L'une renvoie un texte et 1' autre, une serie de personnes. 
Ici, pas d'attributs. Tout se trouve dans 1' interface implemented par notre classe 
SimpIeWCF : 

using System; 

using System. Collections. Generic ; 
using System. Linq; 

using System. Runtime .Serialization; 
using System. ServiceModel; 
using System. Text; 

[ServiceCon tract] 
public interface ISimpleWCF 
{ 

[OperationContract] 

string SayHelloToMe ( string name); 

[OperationContract] 
List<Person> GetPeople () ; 

} 

[ Da taCon tract] 
public class Person 
{ 

[ DataMember ] 
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public string 


FirstName; 


} 


[ DataMember ] 
public string 


LastName ; 



Du cote de notre Silverlight, nous n'avons pas enormement de chose. Juste un textbox 
pour donner son nom et un textblock pour afficher les resultats. Un bouton se trouve 
egalement dans notre XAML pour demander l'acces au Web service : 

<UserControl x : Class="WebServicesApp .Page" 

xmlns="http : / / schema s .microsoft . com/ client/2007" 
xmlns : x="http : / / schemas .microsoft . com/ winf x/2 00 6/xaml" 
Width="400" Height="300"> 

<Grid x : Name="LayoutRoot " Background="White"> 

<StackPanel x : Name="OurStack" Orientation="Vertical "> 
<TextBox x:Name="InputText"x/TextBox> 
<TextBlock x:Name="OutputText"x/TextBlock> 
<ItemsControl x : Name="PeopleList "> 
<ItemsControl . ItemTemplate> 
<DataTemplate> 

<TextBlock Text="{ Binding FirstName}" /> 
</DataTemplate> 
</ ItemsControl . ItemTemplate> 
</ItemsControl> 

<Button x: Name="CallServiceButton" 
Content="Call WCF Simple" 

Click="CallServiceButton_Click"x/Button> 
</StackPanel> 
</Grid> 
</UserControl> 

Au niveau de la gestion de l'evenement, dans le code attache au fichier, nous avons ceci 
lorsque nous voulons contacter le Web service ASP.NET : 

private void CallServiceButton Click (object sender, RoutedEventArgs e) 
{ 

// using ASMX Web service 

SimpleASMX . SimpleAsmxSoapClient proxy = new 

WebServicesApp . SimpleASMX. SimpleAsmxSoapClient ( ) ; 

proxy . SayHelloToMeCompleted += new 

EventHandler<WebServicesApp. SimpleASMX 

. SayHelloToMeCompletedEventArgs> (proxy_SayHelloToMeCompleted) ; 
proxy . SayHelloToMeAsync ( InputText . Text ) ; 

} 
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Avec comme methode pour afficher le resultat : 

void proxy_SayHelloToMeCompleted (object sender, 

WebServicesApp . SimpleASMX. SayHelloToMeCompletedEventArgs e) 

{ 

OutputText . Text = e. Result; 

} 

Si nous souhaitons contacter le service WCF avec la methode simple, nous aurons : 

private void CallServiceButton Click (object sender, RoutedEventArgs e) 
{ 

// using WCF Web service with simple type 
SimpleSVC . SimpleWCFClient proxy = new 

WebServicesApp . SimpleSVC . SimpleWCFClient ( ) ; 
proxy . SayHelloToMeCompleted += new 

EventHandler<WebServicesApp . SimpleSVC . 

SayHelloToMeCompletedEventArgs> (proxy_SayHelloToMeCompleted) ; 
proxy . SayHelloToMeAsync ( InputText . Text ) ; 

} 

Avec exactement la meme methode indiquee au-dessus (proxy_SayHel 1 oToMeCompl eted) 
mais utilisant la definition de WCF : 

void proxy SayHelloToMeCompleted 
(object sender, 

WebServicesApp . SimpleSVC . SayHelloToMeCompletedEventArgs e) 

{ 

OutputText . Text = e. Result; 

} 

Pour contacter la methode qui renvoie des donnees complexes, nous aurons : 

private void CallServiceButton Click (object sender, RoutedEventArgs e) 
{ 

/ / using WCF Web service with complex type 
SimpleSVC . SimpleWCFClient proxy = new 

WebServicesApp. SimpleSVC. SimpleWCFClient () ; 
proxy . GetPeopleCompleted += new EventHandler<WebServicesApp . 

SimpleSVC . GetPeopleCompletedEventArgs> (proxy_GetPeopleCompleted) ; 
proxy . GetPeopleAsync ( ) ; 

} 
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Avec comme methode de traitement : 

void proxy_GetPeopleCompleted (obj ect sender, 

WebServicesApp . SimpleSVC . GetPeopleCompletedEventArgs e) 

{ 

// result is Person [] 

SimpleSVC . Person [ ] people = e. Result; 

PeopleList . Items .Clear ( ) ; 
PeopleList . ItemsSource = people; 

} 

Ou, si vous voulez utiliser LINQ pour filtrer les donnees, par exemple rechercher toutes 
les personnes dont le nom commence par B : 

void proxy_GetPeopleCompleted (obj ect sender, 

WebServicesApp . SimpleSVC . GetPeopleCompletedEventArgs e) 

{ 

// result is Person [] 

SimpleSVC . Person [ ] people = e. Result; 

var filtered = from ppl in people 

where ppl .LastName . StartsWith ("B") 
select ppl; 

PeopleList . Items . Clear ( ) ; 
PeopleList . ItemsSource = people; 

} 

Au niveau du fichier de configuration de Silverlight, nous avons ceci (obtenu lorsque nous 
avons ajoute la reference au Web service de notre projet ASP.NET : 

<conf iguration> 

<system. serviceModel> 
<bindings> 

<basicHttpBinding> 

<binding name="BasicHttpBinding ISimpleWCF" 
maxBuf ferSize="65536" 
maxReceivedMessageSize=" 65536 "> 
<security mode="None" /> 
</binding> 

<binding name="SimpleAsmxSoap" maxBuf f erSize="65536" 
maxReceivedMessageSize=" 6553 6 "> 
<security mode="None" /> 
</binding> 
</basicHttpBinding> 
</bindings> 
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<client> 

<endpoint address="http :/ /localhost : 1597/WebServicesApp Web/ 
SimpleWCF. svc" 
binding="basicHttpBinding" 

bindingConf igur at ion="Ba si cHttpBinding_I SimpleWCF" 
contract="WebServicesApp . SimpleSVC . ISimpleWCF" 
name="Ba si cHttpBinding_I SimpleWCF" /> 
<endpoint address="http :/ /localhost : 1597/WebServicesApp Web/ 
SimpleAsmx . asmx" 
binding="basicHttpBinding" 
bindingConf igur at ion="SimpleAsmxSoap" 
contract="WebServicesApp . SimpleASMX . SimpleAsmxSoap" 
name="SimpleAsmxSoap" /> 
</ client> 
</ system. serviceModel> 
</conf iguration> 

Au niveau de notre page de test dans le projet ASP.NET, nous avons le code suivant : 

<%@ Page Language="C#" AutoEventWireup="true" %> 

<%@ Register Assembly="System. Web . Silverlight" 
Namespace="System. Web . UI . SilverlightControls" 
TagPref ix="asp" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www. w3 . org/TR/xhtml 1/ DTD/xhtml 1- transit ional .dtd"> 

<html xmlns="http : //www. w3 . org/19 99/xhtml" style="height : 10 0%; "> 
<head runat=" server "> 

<title>Test Page For WebServicesApp</title> 
</head> 

<body style="height : 10 0% ; margin : 0 ; "> 

<form id="forml" runat="server" style="height : 100% ; "> 
<asp : Scr iptManager ID="ScriptManager 1 " 
runat="server"x/asp : ScriptManager> 
<div style="height: 100%; "> 

<asp : Silverlight ID="Xamll" runat="server" 
Source=" -/ClientBin/WebServicesApp . xap" Ver sion="2 . 0 " 
Width="100%" Height="100%" /> 
</div> 
</f orm> 
</body> 
</html> 
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Rendez-vous au chapitre 4, Silverlight et ASP.NET, pour comprendre comment 
fonctionne ce contrdle ASP.NET Silverlight. 

L' application est terminee. WCF est une technologie tres vaste. II existe plusieurs livres 
sur ce sujet. Si vous souhaitez plus d' informations, n'hesitez pas a utiliser Google ou Live 
pour trouver tout ce que vous voulez savoir sur cette brique du Framework .NET. 

3.6 ADO.NET/Silverlight 

Silverlight peut exploiter directement les donnees sans passer par un Web service. Pour 
cela, nous utiliserons les methodes presentes dans System. Data. Services. CI ient. 

Les exemples de cette section explorent 1' association entre des elements Order et 
Order_Detai 1 de la base de donnees Northwind disponible a partir du Centre de 
telechargement de Microsoft a cette adresse : http://go.microsoft.com/fwlinlv7linkicN24758. 

(D Code de I'application 

Ce chapitre ne montrera pas de code complet mais uniquement des parties de code. Si vous voulez 
voir la totalite du code, rendez-vous a la fin de cette section. Vous devez garder en tete ce qui a ete 
vu aux chapitres precedents. Veillez aussi a connaTtre lelement XAML Grid qui nous permettra d'afficher 
les donnees. 

Notre application contiendra 5 zones. 

La premiere zone est le Grid en question. II permettra d'afficher les donnees que nous 
allons recolter : 

<Grid. RowDef initions> 

<RowDef inition Height="40"/> 
<RowDef inition Height="25"/> 
<RowDef inition Height="250"/> 
<RowDef inition Height="25"/> 
<RowDef inition Height="2 50 " /> 



</Grid. RowDef inition s> 



Le deuxieme 


element constituant notre interface est un StackPanel contenant deux 


boutons : 




<StackPanel 


Or ientation= "Horizontal" Grid . Row="0 "> 


<Button 


Content="Get Data" 




Width="75" 




Height="20" 




Margin="10" 
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Click="OnGetCustomers"/> 
<Button Content="Get Orders" 
Width="75" 
Height="20" 
Margin="10" 
Click="OnGetOrders"/> 

</StackPanel> 

Ensuite, nous avons besoin de deux TextBlock : un pour afficher le client concerne et 
1' autre pour afficher d'eventuelles erreurs : 

<TextBlock x:Name="CustomerBlock" Grid.Row="l" 

Text="Customers : " Grid . Column=" 0 " FontFamily="Calibri"/> 

<TextBlock x:Name="textBlock" Grid.Row="3" 

Grid.Column="0" FontFamily="Calibri"/> 

II nous faudra ensuite deux DataGrid pour afficher les clients et les commandes associees 
aux clients : 

<data : DataGrid 

Name="dataGridCustomer s" 

Grid.Row="2" 

Margin="20" 

AutoGenerateColumns="True" 
ItemsSource=" {Binding} " 
> 

</data : DataGrid> 

<data : DataGrid 

Name=" dataGridOrder s" 

Grid.Row="4" 

Margin="20" 

AutoGenerateColumns="True" 
ItemsSource=" {Binding} " 
> 

</data : DataGrid> 

L'interface utilisateur Silverlight complete est definie dans l'exemple XAML suivant : 

<UserControl x: Class="SilverlightClientApp4 . Page" 

xmlns = "http : / / schema s .microsoft. com/ win f x/2 00 6 /xaml/ present at ion" 

xmlns : x="http : / / schemas .microsoft . com/ win f x/2 00 6/ xaml" 

xmlns : da ta="clr- name space : System . Windows .Controls ; assembly=System 

.Windows . Controls . Data" 
Width="800" Height="600"> 
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<Grid x : Name="LayoutRoot " Background="White"> 
<Grid . RowDef initions> 

<RowDef inition Height=" 40 "/> 
<RowDef inition Height="25"/> 
<RowDef inition Height="250"/> 
<RowDef inition Height="25"/> 
<RowDef inition Height="250"/> 
</Grid. RowDef i nit ion s> 

<StackPanel Orientation="Horizontal" Grid. Row="0"> 
<Button Content="Get Data" 
Width="75" 
Height="20" 
Margin="10" 

Click="OnGetCustomers"/> 
<Button Content="Get Orders" 
Width="75" 
Height="20" 
Margin="10" 
Click="OnGetOrders"/> 
</StackPanel> 

<TextBlock x:Name="CustomerBlock" Grid.Row="l" 

Text="Customers : " Grid . Column=" 0 " FontFamily="Calibri"/> 

<data : DataGrid 

Name="dataGridCustomer s" 

Grid.Row="2" 

Margin="20" 

AutoGenerateColumns="True" 
ItemsSource=" {Binding} " 
> 

</data : DataGrid> 

<TextBlock x:Name="textBlock" Grid.Row="3" 

Grid.Column="0" FontFamily="Calibri"/> 

<data : DataGrid 

Name="dataGridOrder s" 

Grid.Row="4" 

Margin="20" 

AutoGenerateColumns="True" 
ItemsSource=" {Binding} " 
> 

</data : DataGrid> 
</Grid> 
</UserControl> 
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Du cote du code, nous avons 6 actions a effectuer. D'abord il faut creer l'instance de la 
classe DataServiceContext de type NorthwindEntities : 

NorthwindEntities svcContext; 

void OnLoaded (object sender, EventArgs args) 
{ 

svcContext = new NorthwindEntities ( 

new Ur i ( "Northwind. svc" , UriKind . Relative )) ; 

dataGridCustomers . AutoGeneratingColumn += 

dataGridCustomer s AutoGeneratingColumn ; 
obsvCollCustomers = new ObservableCollection<Customer> ( ) ; 

OnGetCustomers (null, null); 

} 

Dans la methode OnGetCustomers, nous allons rechercher tous les clients dont le pays est 
USA : 

void OnGetCustomers (object sender, EventArgs args) 
{ 

DataServiceQuery<Customer> query = 
( DataServiceQuery<Customer>) 
(from customer in svcContext . Customer s 

where customer . Country == "USA" 

select customer) ; 

try 
{ 

query . BeginExecute (GetCustomersCallback, query) ; 

} 

catch ( DataServiceRequestException ex) 
{ 

textBlock . Text = "OnGetCustomers Error: " + 
ex . Response . ToString () ; 

} 

dataGridOrders . DataContext = null; 

} 

Nous avons utilise ici une methode de CallBack. Cette methode s' execute lorsque le 
traitement qu'on a defini au meme moment est termine. On obtient le resultat en 
parametre de cette fonction CallBack : 

void GetCustomersCallback ( IAsyncResult result) 
{ 
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try 
{ 

DataServiceQuery<Customer> queryResult = 

(DataServiceQuery<Customer>) result .AsyncState; 

IEnumerable<Customer> ienumResults = 

queryResult .EndExecute (result) ; 
obsvCollCustomers = new ObservableCollection<Customer> ( ) ; 

foreach (var item in ienumResults) 
{ 

obsvCollCustomers .Add (item) ; 

} 

Dispatcher . Beginlnvoke (( ) => 
{ 

dataGridCustomers . DataContext = obsvCollCustomers; 

}); 

} 

catch ( DataServiceRequestException ex) 
{ 

textBlock. Text = "GetCustomersCallback Error: " + 
ex . Response . ToString () ; 

} 



Nous avons defini un evenement sur la gestion des colonnes. Nous supprimerons deux 
colonnes qui n'ont pas lieu d'etre dans ce Grid-la. Pour ce faire, nous devons annuler la 
generation si nous rencontrons ces deux colonnes : 

void dataGridCustomers_AutoGeneratingColumn (object sender, 

DataGridAutoGeneratingColumnEventArgs e) 

{ 

if (e . PropertyName == "CustomerDemographics " | | 

e . Proper tyName == "Orders") 

{ 

e. Cancel = true; 

} 

} 

II faut ensuite gerer la liste des commandes d'un client. Pour cela, nous avions cree un 
bouton. Sur le clic du bouton Get Order, nous allons appeler la methode OnGetOrders : 

ObservableCollection<Order> obsvCollCustomer Orders ; 
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void OnGetOrders (obj ect sender, EventArgs args) 
{ 

Customer selectedCustomer = 

**■ (Customer ) dataGridCustomers . Select edit em; 

try 
{ 

svcContext . BeginLoadProperty (selectedCustomer, "Orders " , 
OnPropertyLoading, selectedCustomer) ; 

} 

catch ( DataServiceRequestException ex) 
{ 

textBlock. Text = "OnGetOrders Error: " + 
ex . Response . ToString () ; 

} 

} 

Nous demandons ici a notre DataContext les commandes du client actuellement 
selectionne : 

svcContext . BeginLoadProperty ( selectedCustomer, "Orders" , 

OnPropertyLoading, selectedCustomer) ; 

De la meme maniere, lorsque le resultat aura ete rapatrie, la methode OnPropertyLoadi ng 
sera appelee et cette fonction traitera les differentes informations, comme l'ajout dans le 
DataGrid : 

void OnPropertyLoading ( IAsyncResult result) 
{ 

void OnPropertyLoading ( IAsyncResult result) 
{ 

Customer resultCustomer = result . AsyncState as Customer; 

try 
{ 

svcContext . EndLoadProperty (result) ; 

if (resultCustomer . Orders . Count == 0) 
{ 

textBlock . Text = "Customer has no orders"; 
dataGridOrders . DataContext = null; 
return ; 

} 

else 

textBlock . Text = "Customer orders:"; 
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obsvCollCustomerOrder s = 

new ObservableCollection<Order> ( ) ; 
foreach (Order order in resultCustomer . Orders ) 
{ 

obsvCollCustomerOrders .Add (order) ; 

} 

Dispatcher . Beginlnvoke (( ) => 
{ 

dataGridOrder s . DataContext = obsvCollCustomerOrders; 

}) ; 

} 

catch ( DataServiceRequestException ex) 
{ 

textBlock . Text = "OnPropertyLoading Error: " + 
ex . Response . ToString () ; 

} 



Voici le code de notre Page.xaml.es : 

using System; 

using System. Collections. Generic; 

using System. Linq; 

using System. Net; 

using System. Windows ; 

using System. Windows . Controls; 

using System. Windows . Documents ; 

using System. Windows . Input; 

using System. Windows .Media; 

using System. Windows .Media .Animation; 

using System. Windows . Shapes ; 



using SilverlightClientApp4 . NorthwindSvc ; 
using System. Da ta. Services. Client; 
using System. Collections . Obj ectModel; 



namespace SilverlightClientApp4 
{ 

public partial class Page : UserControl 
{ 

NorthwindEntities svcContext; 

ObservableCollection<Customer> obsvCollCustomer s ; 
ObservableCollection<Order> obsvCollCustomerOrders ; 



public Page ( ) 
{ 
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InitializeComponent () ; 
this . Loaded += OnLoaded; 

} 

void OnLoaded (object sender, EventArgs args) 
{ 

svcContext = new NorthwindEntities ( 

new Ur i ( "Northwind. svc" , UriKind . Relative )) ; 

dataGridCustomers . AutoGeneratingColumn += 

dataGridCustomer s AutoGeneratingColumn; 
obsvCollCustomers = new ObservableCollection<Customer> ( ) ; 

OnGetCustomers (null, null); 

} 

void OnGetOrders (obj ect sender, EventArgs args) 
{ 

Customer selectedCustomer = 

(Customer) dataGridCustomers . Selectedltem; 

try 
{ 

svcContext . BeginLoadProperty ( selectedCustomer, 

"Orders" , 

OnPropertyLoading, selectedCustomer) ; 

} 

catch (DataServiceRequestException ex) 
{ 

textBlock.Text = "OnGetOrders Error: " + 
ex . Response . ToString () ; 

} 

} 

void OnPropertyLoading ( IAsyncResult result) 
{ 

Customer resultCustomer = result . AsyncState as Customer; 

try 
{ 

svcContext . EndLoadProperty (result) ; 

if ( resultCustomer . Order s . Count == 0) 
{ 

textBlock.Text = "Customer has no orders"; 
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dataGridOrder s . DataContext = null; 
return; 

} 

else 

textBlock . Text = "Customer orders:"; 

obsvCollCustomerOrders = 

new ObservableCollection<Order> ( ) ; 
foreach (Order order in resultCustomer . Orders) 
{ 

obsvCollCustomerOrders .Add (order) ; 

} 

Dispatcher . Beginlnvoke (( ) => 
{ 

dataGridOrder s . DataContext = obsvCollCustomerOrder 
}) ; 

} 

catch (DataServiceRequestException ex) 
{ 

textBlock . Text = "OnPropertyLoading Error: " + 
ex . Response . ToString () ; 

} 

} 

void OnGetCustomer s ( ob j ect sender, EventArgs args) 
{ 

DataServiceQuery<Customer> query = 
(DataServiceQuery<Customer>) 
(from customer in svcContext . Customers 
where customer . Country == "USA" 
select customer) ; 

try 
{ 

query . BeginExecute (GetCustomersCallback, query) ; 

} 

catch (DataServiceRequestException ex) 
{ 

textBlock . Text = "OnGetCustomers Error: " + 
ex . Response . ToString () ; 

} 

dataGridOrders . DataContext = null; 



void GetCustomer sCallback ( IAsyncResult result) 
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try 
{ 

DataServiceQuery<Customer> queryResult = 

(DataServiceQuery<Customer>) result. As yncState; 

IEnumerable<Customer> ienumResults = 

queryResult . EndExecute (result) ; 
obsvCollCustomers = new 

ObservableCollection<Customer> ( ) ; 

foreach (var item in ienumResults) 
{ 

obsvCollCustomers .Add (item) ; 

} 

Dispatcher . Beginlnvoke (( ) => 
{ 

dataGridCustomer s . DataContext = obsvCollCustomers; 

}) ; 

} 

catch (DataServiceRequestException ex) 
{ 

textBlock . Text = "GetCustomersCallback Error: " + 
ex . Response . ToString () ; 

} 

} 

void dataGridCustomers AutoGeneratingColumn (obj ect sender, 

DataGridAutoGeneratingColumnEventArgs e) 

{ 

if (e . PropertyName == "CustomerDemographics" | | 

e . PropertyName == "Orders") 

{ 

e. Cancel = true; 

} 

} 

} 

} 
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3.7 Creez un widget meteo 

Avec tout ce que nous avons vu, vous etes maintenant capable de comprendre comment 
creer un Widget indiquant la meteo. 



De nombreux sites Internet diffusent des informations de meteo via Web services. Si vous 
avez un iPhone et que vous ayez deja manipule l'application meteo, vous avez alors deja 
utilise le Web service meteo de Yahoo. En effet, l'application a besoin d'une connexion 
data pour aller rechercher l'information sur Yahoo et vous l'afficher ensuite. 

Nous utiliserons un autre Web service. Vous pourrez trouver un grand nombre de services 
sur le site suivant : http://a4472706772.api.wxbug.net/. 

La premiere chose a faire est d'ajouter la reference au Web service dans votre projet 
Silverlight. Ceci cree un fichier ServiceReferences.ClientConfig : 

<conf iguration> 

<system. serviceModel> 



<bindings> 

<basicHttpBinding> 

<binding name= " Weat he rBugWeb Services Soap" 
maxBuf ferSize="21474 83 64 7" 
maxReceivedMessageSize="214 74 83 64 7"> 
<security mode="None" /> 
</binding> 
</basicHttpBinding> 
</bindings> 
<client> 

<endpoint address="http ://a4472706772.api. wxbug .net/ 
weatherservice . asmx" 




Fig. 3.2 : 



binding="basicHttpBinding" 

bindingConf igur at ion=" Weat he rBugWeb Services Soap" 
con tract=" Weather Service . Weat he rBugWebServices Soap 
name=" Weat he rBugWeb Services Soap" /> 



it 



</ client> 
</ system. serviceModel> 
</ conf iguration> 
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(J) Changement au niveau Web service 

Le code present ici ne Test qu'a titre d'exemples. II se peut que le Web service change de point d'entree 
avant que ce livre sorte. Veuillez done vous rendre sur I'URL indiquee precedemment pour avoir acces 
au point d'acces correct. 

Pour notre interface, nous allons utiliser un grand nombre d'images. Vous pourrez 
retrouver tout ce code et les images sur le site de Micro Application : 

<User Control . Resources> 

<ImageBrush ImageSource="Resources/BLUE-base . png" x : Key="blueBase" /> 
<ImageBrush ImageSource="Resources/GRAY-base . png" x : Key="grayBase" /> 
<ImageBrush ImageSource=" Re sources/ divider- vertical . png" 
x : Key="dividerVertical" Opacity="0 . 6" /> 

<ImageBrush ImageSource=" Re sources/ divider -horizontal . png" 
x : Key="dividerHorizontal" Opacity="0 . 6" /> 
<BitmapImage UriSource="Resources/BLACK-highlight-01 . png" 
x:Key="blackHighlight" /> 

<BitmapImage UriSource="Resources/undocked cloudy. png" 
x:Key="CloudyBig" /> 

<BitmapImage UriSource="Resources/26 .png" x : Key="Cloudy " /> 
<Bitmap Image UriSource="Resources/undocked few-showers .png" 
x : Key="FewShowersBig" /> 

<BitmapImage UriSource="Resources/5 . png" x : Key="FewShower s" /> 
<BitmapImage UriSource="Resources/undocked foggy. png" 
x : Key="FoggyBig" /> 

<BitmapImage UriSource="Resources/19 .png" x : Key="Foggy" /> 
<Bitmap Image UriSource="Resources/undocked hail. png" x : Key="HailBig" /> 
<BitmapImage UriSource="Resources/17 .png" x:Key="Hail" /> 
<BitmapImage UriSource="Resources/undocked partly-cloudy . png" 
x:Key="PartlyCloudyBig" /> 

<BitmapImage UriSource="Resources/29 .png" x : Key="PartlyCloudy" /> 
<BitmapImage UriSource="Resources/undocked rainy. png" 
x:Key="RainyBig" /> 

<BitmapImage UriSource="Resources/8 . png" x : Key="Rainy " /> 
<BitmapImage UriSource="Resources/undocked snow. png" x : Key="SnowBig" /> 
<BitmapImage UriSource="Resources/13 .png" x:Key="Snow" /> 
<BitmapImage UriSource="Resources/undocked sun. png" x:Key="SunBig" /> 
<Bitmap Image UriSource="Resources/undocked moon-full . png" 
x : Key="MoonBig" /> 

<BitmapImage UriSource="Resources/31 .png" x:Key="Sun" /> 
<BitmapImage UriSource="Resources/undocked thunderstorm. png" 
x : Key="ThunderstormBig" /> 

<BitmapImage UriSource="Resources/l . png" x : Key="Thunderstorm" /> 
<BitmapImage UriSource="Resources/undocked windy. png" 
x:Key="WindyBig" /> 

<BitmapImage UriSource="Resources/23 .png" x : Key="Windy" /> 
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<SolidColorBrush Color="White" Opacity="0 . 5" 
x : Key=" zipCodeBackground" /> 
</UserControl .Resources> 

Nous utiliserons ces ressources de la maniere suivante : 

<Canvas Width="71" Background=" { StaticResource dividerVertical } " 
Margin="5, 0, 0, 0"> 



Pour plus d'informations sur le binding, rendez-vous au chapitre Le langage 
XAML, oil Von explique son fonctionnement exact. 

Voici le XAML complet de 1' application qui utilise les ressources : 

<UserControl x: Class="WeatherWidget . Page" 

xmlns="http : / / schemas .microsoft . com/ winf x/200 6 /xaml /pre sent at ion" 

xmlns : x="http : //schemas .microsoft. com/ winf x/2 00 6 /xaml" 

Width="320" 

Height="240" 

> 

<User Control . Resources> 

<ImageBrush ImageSource="Resources/BLUE-base . png" 

x: Key="blueBase" /> 
<ImageBrush ImageSource="Resources/ GRAY-base . png" 

x : Key="grayBase" /> 
<ImageBrush ImageSource="Resources/ divider-vertical . png" 

x: Key="dividerVertical" Opacity="0 . 6" /> 
<ImageBrush ImageSource="Resources/ divider-horizontal . png" 

x : Key="dividerHorizontal " Opacity="0 . 6" /> 
<BitmapImage UriSource="Resources/BLACK-highlight-01 .png" 

x:Key="blackHighlight" /> 
<BitmapImage UriSource="Resources/undocked cloudy. png" 

x:Key="CloudyBig" /> 
<BitmapImage UriSource="Resources/26 .png" x : Key="Cloudy " /> 
<BitmapImage UriSource="Resources/undocked few-showers .png" 

x : Key="FewShowersBig" /> 
<BitmapImage UriSource="Resources/ 5 . png" x : Key="FewShower s" /> 
<BitmapImage UriSource="Resources/undocked foggy. png" 

x : Key="FoggyBig" /> 
<BitmapImage UriSource="Resources/ 1 9 . png" x : Key="Foggy" /> 
<BitmapImage UriSource="Resources/undocked hail. png" 

x:Key="HailBig" /> 
<BitmapImage UriSource="Resources/17 .png" x:Key="Hail" /> 
<BitmapImage UriSource="Resources/undocked partly-cloudy . png" 

x:Key="PartlyCloudyBig" /> 
<BitmapImage UriSource="Resources/2 9 . png" x :Key="PartlyCloudy" /> 
<Bitmap Image UriSource="Resources/undocked_rainy . png" 
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x:Key="RainyBig" /> 




<Bitmap Image 


UriSource="Resources/ 8 . png" x : Key="Rainy " /> 




<BitmapImage 


Ur i Sour ce=" Resources /undo eked snow .png" 
x: Key="SnowBig" /> 




<Bitmap Image 


UriSource="Resources/ 13 . png" x:Key="Snow" /> 




<Bitmap Image 


UriSource="Resources/ undocked sun . png" 
x:Key="SunBig" /> 




<Bitmap Image 


UriSource="Resources/undocked moon-full .png" 
x : Key="MoonBig" /> 




<Bitmap Image 


UriSource="Resources/31 . png" x:Key="Sun" /> 




<BitmapImage 


Ur i Sour ce=" Resources /undo eked thunderstorm. png" 
x : Key="ThunderstormBig" /> 




<Bitmap Image 


Uri Sour ce= "Resources/ 1 . png" x : Key=" Thunder storm" 


/> 


<Bitmap Image 


Ur i Sour ce= "Resources/ undocked windy . png" 
x:Key="WindyBig" /> 




<Bitmap Image 


UriSource="Resources/23 .png" x : Key="Windy" /> 




<SolidColorBrush Color="White" Opacity="0 . 5" 






x : Key="zipCodeBackground" /> 




</UserControl . Resources> 




<Canvas x:Name=" 


LayoutRoot" Width="264" Height="194" 




Background=" { StaticResource blueBase } "> 




<Canvas Canvas . Top=" 13" Canvas . Left="13" Width="230" 




Height="160"> 




<StackPanel x : Name="ConditionsScreen" > 




<Canvas Height="90"> 






<Image x : Name= " Condi tionsOver lay" 






Margin="-13, -13, 0, 0" 






Source=" { StaticResource SunBig} "/> 






<StackPanel> 






<TextBlock Width="225" Height="37" 






TextAlignment=" Right" 






FontSize="34 " x : Name="TodayTemp" 


/> 




<TextBlock Width="225" Height="14" 






TextAlignment= "Right" 






x : Name="TodayDescription" /> 






<TextBlock Width="225" Height="14" 






TextAlignment=" Right" 






x:Name="TodayRange" /> 






<TextBlock Width="225" Height="14" 






TextAlignment= "Right" x:Name="City 






Text="Fetching data..." /> 






</StackPanel> 




</ Canvas> 




<StackPanel Orientation="Horizontal" Height="53"> 






<Canvas Width="71" 






Background=" { StaticResource 






dividerVertical } " 
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Margin="5, 0, 0, 0"> 
<TextBlock FontSize="ll" x : Name="TomorrowName" 
Foreground="White" Opacity="0 . 5" /> 
<Image x : Name="TomorrowImage" Canvas . Top="17 " 

Canvas. Left="23" /> 
<TextBlock Canvas .Top="2 0" x : Name="TomorrowHi " 

Foreground="White" /> 
<TextBlock Canvas .Top="35" x : Name="TomorrowLo" 
Foreground="White" Opacity=" 0 . 5 " /> 

</ Canvas> 
<Canvas Width="71" 

Background=" { StatioResouroe dividerVertical } " 
Margin="5, 0, 0, 0"> 
<TextBlock FontSize="ll" x : Name="DayAf terName" 
Foreground="White" Opacity="0 . 5" /> 
<Image x : Name="DayAf terlmage" Canvas . Top="l 7 " 

Canvas .Left="23" /> 
<TextBlock Canvas .Top="20" x : Name="DayAf terHi " 

Foreground="White" /> 
<TextBlock Canvas .Top="35" x : Name="DayAf terLo" 
Foreground="White" Opacity=" 0 . 5" /> 

</ Canvas> 

<Canvas Width="71" Margin="5, 0, 0, 0"> 

<TextBlock FontSize="ll" x:Name="TwoDaysAwayName" 

Foreground="White" Opacity=" 0 . 5 " /> 
<Image x : Name="TwoDaysAwayImage" Canvas . Top=" 17 " 

Canvas. Left="23" /> 
<TextBlock Canvas .Top="20" x : Name="TwoDaysAwayHi " 

Foreground="White" /> 
<TextBlock Canvas .Top="35" x:Name="TwoDaysAwayLo" 
Foreground="White" Opacity="0 . 5" /> 

</ Canvas> 
</StackPanel> 
<StackPanel Height="17" 

Background=" { StaticResource dividerHorizontal } " 
Orientation="Horizontal " > 
<TextBlock Text="Ref resh data" Margin="5, 0, 5, 0" 

Width="105" Foreground="White" Opacity="0 . 5" 
MouseLef tButtonUp="TextBlock_MouseLef t 
ButtonUp_Ref resh" /> 
<TextBlock Text="Change ZIP" Margin="5, 0, 5, 0" 
Width=" 105" TextAlignment="Right " 
Foreground=" White" 
Opacity="0 . 5" 
MouseLeftButtonUp="TextBlock_MouseLef t 
ButtonUp_Zip" /> 

</StackPanel> 
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</StackPanel> 

<StackPanel x : Name=" ZipCodeScreen" 
Hori zontalAlignment= "Center " 

Visibility="Collapsed" Width="2 30"> 
<TextBlock Margin="0, 50, 0, 0" 

Text="Please enter ZIP code:" 
Width="130" /> 
<StackPanel Orientation="Horizontal" Width="120" > 

<TextBox x:Name="ZipCode" Width="55" MaxLength="5" 
FontSize="14" 

Background=" { StaticResource 
zipCodeBackground} " /> 
<Button Content="Change" 

Click="Button_Click" Margin="10, 0, 0, 0" /> 
</StackPanel> 

<TextBlock Margin="0, 20, 0, 0" 
Width="220" 

Text="Weather data courtesy of WeatherBug." 
+■ /> 

</StackPanel> 

<Image IsHitTestVisible="False" 

Source=" { StaticResource blackHighlight } " /> 

</ Canvas> 
</ Canvas> 
</UserControl> 

Dans le code C# attache a ce fichier XAML, nous avons tout ce qui est connexion au Web 
service. C'est la que nous irons rechercher les donnees concernant la meteo. 

Nous avons une classe Page qui derive de UserControl, comme dans chaque projet 
Silverlight : 

using System; 

using System. ServiceModel; 

using System. Windows ; 

using System. Windows . Controls ; 

using System. Windows . Input; 

using System. Windows . Media; 

using System. Windows .Media . Imaging; 

using Weather Widget . Wea t her Service; 

using System. Windows .Browser; 

namespace WeatherWidget 
{ 

public enum WeatherConditions 
{ 

Cloudy, 
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FewShowers, 

Foggy, 

Hail, 

PartlyCloudy , 

Rainy, 

Snow, 

Sun, 

Moon, 

Thunderstorm, 
Windy 

} 

public partial class Page : UserControl 
{ 

public Page ( ) 

{ 

} 

} 

} 

Nous avons une enumeration qui permet de choisir l'image qui sera affichee. Dans les 
ressources, nous avons declare deux arriere-plans. Un pour les bonnes journees et l'autre 
pour les mauvaises journees. Par defaut, le soleil est affiche : 

<Canvas x:Name="LayoutRoot" Width="264" Height="194" 
Background=" { StaticResource blueBase}"> 

Au niveau des ressources, nous avions bien : 

<ImageBrush ImageSource="Resources/BLUE-base . png" 

x: Key="blueBase" /> 
<ImageBrush ImageSource="Resources/GRAY-base . png" 
x : Key="grayBase" /> 

Grace a l'ajout de la reference vers le Web service, nous pouvons creer un projet de type : 
WeatherBugWebServicesSoapCl ient 

private WeatherBugWebServicesSoapClient proxy; 

En plus de cet objet, nous avons besoin de deux variables : 

// Veuillez obtenir une clef pour l'api a cette adresse : 
// http : / /www . weatherbug . com/api/def ault . asp 
private const string apiCode = ""; 
private int zipCode = 98101; 
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(D Le code postal en dur 

Nous avons ici impose un code postal a I'application. Nous aurions pu decider que ce code serait 
donne par I'utilisateur. II s'agit seulement d'un code de base. L'utilisateur est apte d changer ce code via 
une textbox. On pourra alors faire une nouvelle fois appel au Web service avec une nouvelle valeur 
pour le code postal. 

Dans le constructeur de notre application, nous allons creer et initialiser ce qui concerne 
notre Web service : 

public Page ( ) 
{ 

// Required to initialize variables 
InitializeComponent ( ) ; 

// Check that user provided an API key 
if ( ! String. I sNullOrEmpty (apiCode) ) 
{ 

// Initialize Web service 

proxy = new WeatherBugWebServicesSoapClient ( ) ; 

/ / Create event handlers for service methods 
proxy . GetForecastByUSZipCodeCompleted += 

new EventHandler<GetForecastByUSZipCodeCompletedEventArgs> 
(proxy_GetForecastByUSZipCodeCompleted) ; 
proxy . GetLiveWeatherByUSZipCodeCompleted += 

new Event Handle r<GetLiveWea the rByUSZipCodeCompletedEventArgs> 
(proxy_GetLiveWeatherByUSZipCodeCompleted) ; 

/ / Update display 
UpdateDisplay ( ) ; 

} 

else 
{ 

// If no API key was provided, alert the user and disable the UI 
City. Text = "No API key provided"; 
ConditionsScreen . I sHitTestVisible = false; 
ZipCodeScreen . IsHitTestVisible = false; 

} 

} 

La premiere fonction utilisee est Initial izeComponent. Elle est presente dans toutes les 
applications. Elle permet d'initialiser les differents composants XAML de I'application. 
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Par exemple, dans notre cas : 

[System. Diagnostics . DebuggerNonUserCodeAttribute ( ) ] 
public void InitializeComponent ( ) { 
if (_contentLoaded) { 
return; 

} 

_contentLoaded = true; 

System. Windows .Application . LoadComponent (this, new System. Uri 

( "/WeatherWidget; component/Page . xaml" , System. UriKind. Relative) ) ; 
this . LayoutRoot = ( (System . Windows . Controls . Canvas ) ( this . FindName 

("LayoutRoot"))); 
this . ConditionsScreen = ( (System. Windows . Controls . StackPanel) 

( this . FindName ( "ConditionsScreen" ) ) ) ; 
this . ConditionsOverlay = ( (System. Windows . Controls . Image) 

(this . FindName ("ConditionsOverlay") ) ) ; 
this . TodayTemp = (( System. Windows . Controls . TextBlock) (this . FindName 

("TodayTemp") ) ) ; 
this . TodayDescription = 

( (System .Windows . Controls . TextBlock) ( this . FindName 

("TodayDescription"))); 
this . TodayRange = ( (System . Windows . Controls . TextBlock) (this . FindName 

("TodayRange") ) ) ; 
this. City = ( (System. Windows . Controls . TextBlock) 

(this. FindName ("City") )) ; 
this . TomorrowName = ( (System. Windows . Controls . TextBlock) (this . FindName 

( "TomorrowName" ) ) ) ; 
this . Tomorrowlmage = (( System. Windows . Controls . Image) (this . FindName 

("Tomorrowlmage") ) ) ; 
this . TomorrowHi = ( (System . Windows . Controls . TextBlock) (this . FindName 

("TomorrowHi") ) ) ; 

this . TomorrowLo = ( (System . Windows . Controls . TextBlock) (this . FindName 
("TomorrowLo"))); 

this . DayAf terName = (( System. Windows . Controls . TextBlock) (this . FindName 

( "DayAf terName" ) ) ) ; 
this . DayAf ter Image = (( System. Windows . Controls . Image ) (this . FindName 

("DayAf ter Image") ) ) ; 
this . DayAf terHi = ( (System . Windows . Controls . TextBlock) (this . FindName 

("DayAf terHi") ) ) ; 

this . DayAf terLo = ( (System .Windows . Controls . TextBlock) (this . FindName 
("DayAf terLo") ) ) ; 

this . TwoDaysAwayName = ( (System. Windows . Controls . TextBlock) (this . FindName 

("TwoDaysAwayName"))); 
this . TwoDaysAwaylmage = 

( (System. Windows . Controls . Image) (this . FindName 

("TwoDaysAwaylmage"))); 
this . TwoDaysAwayHi = (( System. Windows . Controls . TextBlock) 

(this . FindName ("TwoDaysAwayHi") ) ) ; 
this . TwoDaysAwayLo = ( (System .Windows . Controls . TextBlock) (this .FindName 

("TwoDaysAwayLo"))); 
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this . ZipCodeScreen = ( (System. Windows . Controls . StackPanel ) 

(this . FindName ( "ZipCodeScreen" ) ) ) ; 
this.ZipCode = (( System. Windows . Controls . TextBox) 

(this.FindName("ZipCode") ) ) ; 

} 

Ensuite, nous creons notre instance du type objet WeatherBugWebServi ceSoapCl ient : 

proxy = new WeatherBugWebServicesSoapClient ( ) ; 

Nous avons declare ce proxy precedemment dans le code ann d' avoir acces a cette 
variable partout dans le reste des fonctions. C'est done un variable globale. 

Nous ajoutons apres deux evenements qui seront intercepted par les deux fonctions 
suivantes : 

proxy_GetForecastByl)SZi pCodeCompl eted ; 
proxy_GetLi veWeatherByUSZi pCodeCompl eted. 

Le type des arguments est defini dans la reference. Nous avons par exemple 
Get Li veWeatherByUSZi pCodeCompl etedEventArgs : 

[System. Diagnostics . DebuggerStepThroughAttr ibute ( ) ] 

[System . CodeDom. Compiler . GeneratedCodeAt tribute ( "System. ServiceModel" , 
"3.0.0.0") ] 

public partial class GetLiveWeatherByUSZipCodeCompletedEventArgs : 
System. ComponentModel . AsyncCompletedEventArgs { 

private object [] results; 

public GetLiveWeatherByUSZipCodeCompletedEventArgs 
(object [] results, System. Exception exception, 
bool cancelled, object userState) : 
base (exception, cancelled, userState) { 
this. results = results; 

} 

public WeatherWidget . WeatherService . LiveWeatherData Result { 
get { 

base . RaiseExceptionlfNecessary ( ) ; 

return ( (WeatherWidget . WeatherService . LiveWeatherData) 
(this. results [0] ) ) ; 

} 

} 

} 
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Ce code est automatiquement genere par l'ajout de la reference au Web service. II est 
toutefois important de savoir comment cela fonctionne. Vous serez parfois dans 
l'obligation de declarer vous-meme ces objets. Quoi qu'il en soit, Visual Studio gere pour 
vous une grande partie du projet. 

Les deux fonctions evenements doivent etre declarees. La premiere permet de connaitre 
les previsions meteo et la deuxieme le temps actuel : 

void proxy_GetForecastByUSZipCodeCompleted (obj ect sender, 
GetForecastByUSZipCodeCompletedEventArgs e ) 

{ 

ArrayOf AnyType forecast = e. Result; 

// Set the remaining three days, except for today 
for (int i = 1; i < 4 ; i++) 
{ 

ApiForecastData today = (ApiForecastData) forecast [i] ; 

setDay(i, today. Title, parseTemp (today. TempHigh) , 

parseTemp (today. TempLow) , int . Parse ( today . Condi tionID) ) ; 

} 

// Then call for today's live data, and pass the conditions we'll 
need later 

proxy . GetLiveWeatherByUSZipCodeAsync ( zipCode . ToString ( ) , 
UnitType . English, apiCode, f orecast [ 0 ] ) ; 

} 

void proxy_GetLiveWeatherByUSZipCodeCompleted (object sender, 
GetLiveWeatherByUSZipCodeCompletedEventArgs e) 

{ 

LiveWeatherData today = e. Result; 

ApiForecastData todayForecast = (ApiForecastData) e . UserState; 
// Set today's conditions 

setToday (today. City, todayForecast. ShortPrediction, 
float. Parse(today. Temperature ) , 

parseTemp ( today . TemperatureHigh) , 
parseTemp (today. TemperatureLow) , 

int.Parse( todayForecast . ConditionID) , 
! todayForecast. IsNight) ; 

} 



163 



3 



Exploiter vos sources de donnees 



Dans la premiere fonction, nous avons besoin de setDay. Cette fonction va rechercher les 
elements XAML pour y afficher les bonnes valeurs, au bon endroit. Elle emploie une 
fonction "utilitaire" pour convertir le temps : 



static int parseTemp ( string input) 
{ 




int temp; 




// Remove trailing unrecognized 
input = input .TrimEnd (' \xFFFD' ) ; 


characters 


// If the hi/lo is unavailable, 
if (String. IsNullOrEmpty (input) 
{ 


set it to 0 

I | input == »—«) 


temp = 0 ; 

} 

else 






{ 

temp = int . Parse ( input ) ; 

} 




return temp; 

} 





SetDay permet de mettre a jour les differents elements de notre XAML : 



private void setDay (int 


offset, string name, 


int hi, int lo, int 

{ 

TextBlock todayName; 


we a the r Condi t ion s ) 




TextBlock todayHi; 






TextBlock todayLo; 






Image today Image; 






switch (offset) 
{ 






case 1 : 






todayName 




TomorrowName; 


todayHi = 


TomorrowHi ; 


todayLo = 


TomorrowLo ; 


todaylmage 




Tomorrowlmage; 


break; 






case 2 : 






todayName 




DayAf terName ; 


todayHi = 


DayAf terHi; 


todayLo = 


DayAf terLo; 


todaylmage 




DayAf ter Image; 
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break; 
case 3: 
default : 

todayName = TwoDaysAwayName; 

todayHi = TwoDaysAwayHi ; 

todayLo = TwoDaysAwayLo; 

today Image = TwoDaysAway Image ; 

break; 

} 

todayName . Text = name . ToString () ; 
todayHi. Text = hi . ToString ( ) + 
todayLo. Text = lo . ToString ( ) + "°"; 

todaylmage . Source = mapConditionsToImage (mapCodesToConditions 
(weatherConditions , true) , false) ; 

} 

On voit que dans le switch, on recherche les bons elements XAML au bon endroit. Cela 
se fera en fonction du choix de l'affichage des previsions pour le jour un, deux ou trois 
et de V offset qui est passe en parametre. 

Ensuite, on indique les bonnes valeurs, valeurs passees en parametre de notre fonction. 
On mappe apres l'image qui correspond aux valeurs : 

private Bitmaplmage mapConditionsToImage (WeatherConditions 
weatherConditions, bool isBig) 

{ 

// Build the resource name - something like RainyBig 

string resourceName = Enum. GetName (typeof (WeatherConditions) , 

weatherConditions) + (isBig ? "Big" : ""); 
return (Bitmaplmage) Resources [resourceName] ; 

} 

La valeur passee en parametre est obtenue a l'aide d'une fonction 
MapCodesToConditions. Cette fonction etant peu complexe mais excessivement longue, 
nous F avons placee a la fin de cet exemple, dans une partie portant le nom de la fonction. 

L' autre fonction dont nous avons besoin est celle qui va afficher le temps qu'il fait 
actuellement dehors. Cette fonction se nomme SetToday et nous l'avons utilisee dans 
proxy_GetLi veWeatherByUSZi pCodeCompl eted. Elle suit plus ou moins le meme principe : 

private void setToday ( string cityName, string description, 

float temp, int hi, int lo, int weatherConditions, bool isDay) 
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} 



/ / Set the weather parameters 
City. Text = cityName; 

TodayTemp.Text = temp . ToString ( ) + " ° " ; 
TodayDescription . Text = description; 
TodayRange.Text = hi + "° - " + lo + 

/ / Set the correct background according to the conditions 
WeatherConditions currentConditions = 

mapCodesToConditions (weatherConditions , isDay) ; 

/ / Set correct main image according to the conditions 
ConditionsOverlay. Source = mapConditionsToImage 
(currentConditions, true) ; 

if ( ! isDay | | 

(currentConditions == WeatherConditions .Moon) | | 
(currentConditions == WeatherConditions . Cloudy ) | | 
(currentConditions == WeatherConditions . Foggy) | | 
(currentConditions == WeatherConditions . Hail ) | | 
(currentConditions == WeatherConditions . Rainy) | | 
(currentConditions == WeatherConditions . Snow) | | 
(currentConditions == WeatherConditions . Thunderstorm) ) 

{ 

LayoutRoot . Background = 

( ImageBrush) Resources [ "grayBase" ] ; 

} 

else 
{ 

LayoutRoot . Background = 

( ImageBrush) Resources [ "blueBase" ] ; 

} 



On met une valeur a quelques champs et on fait appel aux memes methodes que dans la 
premiere fonction : mapConditionsToImage et mapCodesToConditions. 

Le constructeur fait ensuite appel a une fonction UpdateDi spl ay pour mettre a jour toutes 
les donnees : 

private void UpdateDisplay ( ) 
{ 

// Call for the 4 day forecast first 
proxy . GetForecastByUSZipCodeAsync 

( zipCode . ToString () , UnitType . English, apiCode) ; 

} 
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Cette methode declenche les deux autres evenements qui mettent a jour les donnees de 
notre application Silverlight. Nous l'utiliserons un peu partout dans notre code. 

Comme indique dans la remarque precedemment, nous disposons d'un bouton qui permet 
de mettre a jour le code postal. Nous avons done ajoute un evenement sur le clic du 
bouton : 

private void Button Click (object sender, RoutedEventArgs e) 
{ 

bool error = false; 

if ( ZipCode . Text . Length == ZipCode .MaxLength) 
{ 

try 
{ 

zipCode = int . Parse ( ZipCode . Text) ; 
UpdateDisplay ( ) ; 

/ / Switch to conditions screen 

ConditionsScreen .Visibility = Visibility .Visible; 
ZipCodeScreen . Visibility = Visibility . Collapsed; 

} 

catch ( FormatException ) 
{ 

error = true; 

} 

} else { 

error = true; 

} 

if (error) 

ZipCode . Foreground = new SolidColorBrush (Colors . Red) ; 

} 

Ce bouton va rechercher le code postal dans une textbox, le transforme en chiffre et met 
a jour le contenu de notre application. 

Nous avons encore deux evenements a gerer du cote de notre code. 
TextBl ock_MouseLeftButtonUp_Zi p est l'un de ces evenements. II permet en fait 
d'afficher la textbox pour modifier le code postal : 

private void TextBlock MouseLef tButtonUp Zip 
(object sender, MouseButtonEventArgs e) 

{ 

ZipCode. Text = ""; 
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ZipCode . Foreground = new SolidColorBrush 
(Colors .Black) ; 

// Switch to ZIP code selection screen 
ConditionsScreen .Visibility = Visibility . Collapsed; 
ZipCodeScreen . Visibility = Visibility .Visible; 

} 

Enfin, nous disposons d'un bouton permettant de rafraichir le contenu. Pour cela, il suffit 
d'appeler la methode deja declaree precedemment : 

private void TextBlock MouseLef tButtonUp Refresh 
(object sender, MouseButtonEventArgs e) 

{ 

UpdateDisplay ( ) ; 

} 

L' application du cote Silverlight est terminee. Reste a creer une page HTML de test pour 
afficher notre application dans un navigateur. 

Au niveau de notre page HTML, rien de tres difficile : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www. w3 . org/TR/xhtml 1/ DTD/xhtml 1- transitional .dtd"> 
<html xmlns="http : //www. w3.org/1999/xhtml" > 
<!-- saved from url= ( 00 14 ) about : internet --> 
<head> 

<title>Silverlight Project Test Page </title> 

<style type="text/css"> 
html, body { 

height: 10 0%; 

overflow: auto; 

} 

body { 

padding: 0; 
margin : 0 ; 

} 

fsilverlightControlHost { 
height: 10 0%; 

} 

</style> 

<script type="text/ j avascript"> 

function onSilverlightError (sender , args) { 
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var appSource = ""; 

if (sender != null && sender != 0) { 

appSource = sender . getHost (). Source; 

} 

var errorType = args . ErrorType; 
var iErrorCode = args .ErrorCode; 

var errMsg = 

"Unhandled Error in Silverlight 2 Application " + 
appSource + "\n" ; 

errMsg += "Code: "+ iErrorCode + " \n"; 
errMsg += "Category: " + errorType + " \n"; 
errMsg += "Message: " + args . ErrorMessage + " \n"; 

if (errorType == "ParserError " ) 
{ 

errMsg += "File: " + args . xamlFile + " \n"; 
errMsg += "Line: " + args . lineNumber + " \n"; 
errMsg += "Position: " + args . charPosition + " \n"; 

} 

else if (errorType == "RuntimeError " ) 
{ 

if (args . lineNumber != 0) 
{ 

errMsg += "Line: " + args . lineNumber + " \n"; 
errMsg += "Position: " + args . charPosition + " \n"; 

} 

errMsg += "MethodName: " + args . methodName + " \n"; 



throw new Error (errMsg) ; 

} 

</ script> 
</head> 

<body> 

<!-- Runtime errors from Silverlight will be displayed here. 

This will contain debugging information and should be 

removed or hidden when debugging is completed --> 

<div id=' errorLocation' style="f ont-size : small ; color : Gray; "> 

</div> 

<div id="silverlightControlHost"> 

<ob j ect data="data : application/ x-silverlight-2 , " 

type="application/x-silverlight-2 " width=" 10 0% " 
height="100%"> 
<param name="source" 
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value="ClientBin/WeatherWidget . xap" /> 




<param name="onerror " 




value="onSilverlightError " /> 




<param name="background" 




value="white" /> 




<param name="minRun time Vers ion" 




value="2. 0.30923.0" /> 




<param name="autoUpgrade" value="true" /> 




<a href ="http: //go .microsoft . com/f wlink/ ?LinkID=12 4 807 " 




style="text-decoration : none; "> 




<img src="http :/ /go .microsoft . com/ f wlink/ ?LinkId=l 08 18 1 " 




alt="Get Microsoft Silverlight" 




style="border-style : none"/> 




</a> 




</ ob j ect> 




<i frame 




visibility="hidden" height="0" width="0" border="0px"x/if rame> 


</div> 


</body> 




</html> 





Notre premier exemple est termine. Nous avons vu ici comment contacter un Web 
service. Dans le prochain exemple, nous apprendrons a manipuler les donnees RSS. 

MapCodesToConditions 

static WeatherConditions mapCodesToConditions ( int weatherConditions, 
bool isDay) 

{ 

WeatherConditions conditions; 

switch (weatherConditions) 
{ 

case 1 : 
case 13: 
case 24 : 
case 34 : 
case 66: 
case 68 : 
case 73: 

conditions = WeatherConditions . Cloudy ; 

break; 
case 9: 
case 19: 
case 21 : 
case 25: 
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case 


27 : 


case 


28 : 


case 


32 : 


case 


36: 


case 


46: 


case 


47 : 


case 


48 : 


case 


49: 


case 


56: 


case 


57 : 


case 


60 : 


case 


61 : 


case 


84 : 


case 


85: 


case 


86: 


case 


90 : 


case 


91 : 


case 


92 : 


case 


96: 


case 


97 : 


case 


98 : 


case 


99: 


case 


100: 


case 


101: 


case 


120: 


case 


121 : 


case 


122 : 


case 


123: 


case 


124 : 


case 


125: 


case 


129: 


case 


130: 


case 


131 : 


case 


135: 


case 


136: 


case 


137 : 


case 


140: 


case 


142 : 


case 


144 : 


case 


145: 


case 


152 : 


case 


153: 


case 


155: 


case 


157: 


conditions = WeatherConditions . FewShower s ; 


break; 


case 


23: 



171 



3 Exploiter vos sources de donnees 



case 33 : 
case 51 : 

conditions = WeatherConditions . Foggy ; 

break; 
case 2 : 
case 3: 
case 16: 
case 67 : 
case 71 : 
case 72 : 

conditions = WeatherConditions . PartlyCloudy; 



break; 


case 


5: 


case 


14 : 


case 


15: 


case 


20 : 


case 


38 : 


case 


41 : 


case 


42 : 


case 


45: 


case 


52 : 


case 


58 : 


case 


59: 


case 


63: 


case 


81 : 


case 


82 : 


case 


83: 


case 


87 : 


case 


88 : 


case 


89: 


case 


108: 


case 


109: 


case 


110: 


case 


114 : 


case 


115: 


case 


116: 


case 


132 : 


case 


133: 


case 


134 : 


case 


139: 


case 


141 : 


case 


148 : 


case 


150: 


case 


156: 



conditions = WeatherConditions . Rainy; 
break; 
case 8 : 
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case 


11 : 


case 


12 : 


case 


29: 


case 


39: 


case 


40: 


case 


43: 


case 


44 : 


case 


54 : 


case 


55: 


case 


62 : 


case 


69: 


case 


74 : 


case 


78 : 


case 


79: 


case 


80 : 


case 


102 : 


case 


103: 


case 


104 : 


case 


111 : 


case 


112 : 


case 


113: 


case 


117 : 


case 


118: 


case 


119: 


case 


126: 


case 


127 : 


case 


128: 


case 


138: 


case 


146: 


case 


149: 


case 


151: 


case 


154: 


conditions = WeatherConditions . Snow; 


break; 


case 


0: 


case 


7 : 


case 


10 : 


case 


17 : 


case 


26: 


case 


31 : 


case 


35: 


case 


37 : 


case 


64 : 


case 


65: 


case 


70 : 


case 


75: 


case 


76: 
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case 77 : 
default : 

conditions = (isDay) ? WeatherConditions . Sun : 
WeatherConditions .Moon; 

break; 
case 6: 
case 18 : 
case 22 : 
case 30 : 
case 53 : 
case 93 : 
case 94 : 
case 95: 
case 105: 
case 106: 
case 107: 
case 143: 
case 147: 

conditions = WeatherConditions . Thunder storm; 
break; 
case 50 : 

conditions = WeatherConditions . Windy ; 
break; 

} 

return conditions; 

} 



3.8 Traitez un flux de donnees RSS 

RSS est un format de donnees base sur XML. II permet la plupart du temps de stocker 
des actualites (titre, description, date etc.). Le format RSS est utilise partout : sur des 
blogs, des forums, des sites d'actualite, etc. II etait done tres important de pouvoir 
1' exploiter correctement dans Silverlight. 

Encore une fois, ce n'est pas dans Silverlight que nous allons trouver la solution mais 
dans C#. En effet, le Framework 3.0 nous offre une nouveaute des plus utiles et sou vent 
sous-exploitee : la classe SyndicationFeed. 

A partir de ce moment-la, il devient simple de creer une application Silverlight parvenant 
a lire du RSS. 

Notre application est composee d'un header (haut de 1' application) et de deux colonnes : 
l'une pour afficher les differents titres du RSS et 1' autre pour afficher une vue plus 
detaiilee du contenu du RSS (de l'element selectionne pour etre plus exact). 
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Pour le header, rien de tres complique : une textbox et un bouton, a peu de choses pres : 

<StackPanel Orientation="Vertical " Width="845" > 

<TextBlock Text="Enter feed address below. If this 

control and the feed are not hosted on the same 
domain, add a clientaccesspolicy . xml or 
crossdomain . xml file to domain where 
the feed is hosted to enable 
cross-domain access." 

TextWrapping="Wrap" FontSize="14" /> 
<StackPanel Orientation="Hor izontal " Margin="0, 10, 0, 10"> 
<TextBox Width="400" x:Name="f eedAddress" FontSize=" 14 "/> 
<Button Content="Fetch feed" Margin="20, 0, 0, 0" 
FontSize="14" Click="Button_Click" /> 

</StackPanel> 

Ensuite, pour les deux colonnes du bas qui affichent le contenu, nous avons une ListBox 
et un StackPanel avec un ScrollViewer pour afficher le texte : 

<StackPanel Or ientation= "Horizontal " 
Margin="0, 10, 0, 10"> 
<TextBox Width="400" x : Name="f eedAddress" 

FontSize="14"/> 
<Button Content="Fetch feed" Margin="20, 0, 0, 0" 
FontSize="14" Click="Button_Click" /> 

</StackPanel> 

<StackPanel Or i en tation=" Horizontal "> 
<ListBox x : Name="itemsList " 

ItemsSource=" {Binding} " Width="325" 
Height="500" 

Select ionChanged="itemsList SelectionChanged" 
Visibility="Collapsed"> 
<ListBox. ItemTemplate> 
<DataTemplate> 
<TextBlock 

Text=" {Binding Title. Text, 

Converter= { StaticResource htmlSanitizer } } " 
TextWrapping="Wrap" Width="300" 
FontSize="14"/> 
</DataTemplate> 
</ListBox . ItemTemplate> 
</ListBox> 

<StackPanel x : Name="itemContent" Orientation="Vertical " 

Width="500" Height="500" Margin="20, 0, 0, 0" 
Visibility="Collapsed"> 
<HyperlinkButton Content=" { Binding Title. Text, 
Converter= {StaticResource htmlSanitizer } } " 
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NavigateUri=" {Binding Links, 
Converter= { StaticResource linkFormatter } } " 

FontSize="16" TargetName="_blank" /> 
<TextBlock Text="{ Binding PublishDate } " 

TextWrapping="Wrap" FontSize="14" /> 
<ScrollViewer Height="445" Margin="0, 10, 0, 0"> 
<TextBlock Text=" { Binding Summary . Text, 

Converter= { StaticResource htmlSanitizer } } " 
TextWrapping="Wrap" FontSize="14 " /> 
</ ScrollViewer> 
</StackPanel> 
</StackPanel> 



Sans oublier que nous avons besoin de deux ressources stockees au tout debut de notre 
code dans les ressources de V usercontrol : 



<UserControl . Resources> 








<local : HtmlSanitizer 


x : Key= 


"htmlSanitizer" 


/> 


<local : LinkFormatter 


x : Key= 


"linkFormatter" 


/> 


</UserControl . Resources> 









Au niveau du code, rien d' extraordinaire non plus. Dans le constructeur, nous mettrons 
une valeur par defaut dans la textbox : 

public Page ( ) 
{ 

InitializeComponent ( ) ; 

// Start with a default feed 
f eedAddress . Text = 

"http : / / feeds . wired . com/wired/ index? format=xml" ; 

} 

Sur le clic du bouton, nous allons instancier un objet WebCl ient. Cet objet ira telecharger 
le contenu. Nous pourrons ensuite traiter le contenu avec notre objet Syndi cati onFeed, a 
l'aide d'un evenement. 

(J) Le code asynchrone 

On voit souvent le mot async utilise dans le code. En fait, il s'agit de traiter plusieurs choses en parallele 
pour augmenter la vitesse d'execution. Ce que nous faisons ici, c'est dire : "Va rechercher le contenu 
et notifie-nous d'un evenement quand tu as fini". C'est pour cela que I'evenement s'appelle 
client_OpenReadCompleted, completed signifiant complet. 
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private void Button Click (object sender, RoutedEventArgs e) 
{ 

itemsList .Visibility = Visibility . Collapsed; 
itemContent .Visibility = Visibility . Collapsed; 

// Make HTTP request to get feed 
WebClient client = new WebClient () ; 
client . OpenReadCompleted += new 

OpenReadCompletedEventHandler ( client OpenReadCompleted); 
client . OpenReadAsync (new Uri ( f eedAddress . Text) ) ; 

} 

Le resultat sera transmis en parametre de l'evenement. Nous pouvons done le recuperer 
dans la fonction cl i ent_OpenReadCompl eted qui sera appelee lorsque le telechargement 
du contenu sera fini : 

void client_OpenReadCompleted (obj ect sender, 

OpenReadCompletedEventArgs e) 

{ 

if (e. Error == null) 
{ 

/ / Load feed into SyndicationFeed 

XmlReader reader = XmlReader . Create (e . Result ) ; 

SyndicationFeed feed = SyndicationFeed. Load (reader ) ; 

/ / Set up databinding 

itemsList . DataContext = (feed as SyndicationFeed) . Items ; 
itemsList .Visibility = Visibility .Visible; 

} 

} 

Nous avions dans les ressources deux objets qui sont des converters. On utilise ces objets 
pour convertir une valeur. Par exemple, nous allons recevoir un texte mais il faut qu'il 
soit bien formate. Pour cette raison, nous avons une classe HtmlSanitizer : 

public class HtmlSanitizer : IValueConverter 
{ 

public object Convert (obj ect value, Type targetType, 
object parameter, 

System. Globalization . Cult ure Info culture ) 

{ 

/ / Remove HTML tags and empty newlines and spaces 
string returnString = 

Regex . Replace (value as string, "<.*?>", ""); 
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returnString = 

Regex . Replace ( returnString, @"\n+\s+", "\n\n"); 

// Decode HTML entities 
returnString = 

HttpUtility . HtmlDecode (returnString) ; 

return returnString; 

} 

public object ConvertBack (object value, 
Type targetType, 

object parameter, System . Globalization . Culturelnfo culture) 

{ 

throw new NotlmplementedException () ; 

} 

} 

L'objet implemente une interface I Val ueConverter. C'est de cette maniere que le 
programme sait que c'est un converter. Nous avons la meme chose pour Li nkFormatter : 

public class LinkFormatter : IValueConverter 



public object Convert (object value, Type targetType, 

object parameter, System . Globalization . Culturelnfo culture) 

{ 

/ / Get the first link - that' s the link to the post 
return 

( (Collection<SyndicationLink>) value) . FirstOrDef ault ( ) .Uri; 

} 

public object ConvertBack (obj ect value, Type targetType, 

object parameter, System . Globalization . Culturelnfo culture) 

{ 

throw new NotlmplementedException () ; 

} 

} 

Au niveau de notre page de test HTML, nous avons la meme chose que d' habitude : 

<div id="Divl"> 

<ob j ect data="data : application/ x-silverlight-2 , " 
type=" application/ x-silverlight-2 " 
width="100%" height="100%"> 
<param name="source" 

value="ClientBin/ SyndicationFeedReader . xap"/> 
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<param name="onerror " 

value="onSilverlightError " /> 
<param name="background" 

value="white" /> 
<param name="minRuntimeVersion" 

value="2. 0.30923.0" /> 
<param name="autoUpgrade" value="true" /> 
<a href="http : / /go .microsoft . com/ fwlink/ ?LinkID=12 4 80 7 " 
style="text-decoration : none; "> 

<img src="http:// go. microsoft. com/ fwlink/ ?LinkId=l 08181 " 
alt="Get Microsoft Silverlight" style="border-style : 
none"/> 

</a> 
</ ob j ect> 
<i frame 

visibility="hidden" height="0" width="0" border="0px"x/if rame> 
</div> 

Cet exemple court mais utile est maintenant termine. 




Fig. 3.3 : Notre application terminee 

Nous allons etudier dans le prochain chapitre les concepts avances de Silverlight. Vous 
verrez aussi par la suite comment ameliorer l'insertion de Silverlight lorsque vous utilisez 
ASP.NET comme technologie serveur. 

3.9 Check-list 

Dans ce chapitre nous avons etudie : 

1' exploitation des sources de donnees SQL ; 
s/ l'utilisation des Web services ; 
✓ LINQ; 

«/ la manipulation XML au travers d'un exemple ; 

la manipulation de donnees RSS au travers d'un exemple. 
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4.1 Introduction d ASP.NET 

4.2 Les controles ASP.NET 

4.3 Les controles ASP.NET pour Silverlight 

4.4 Interaction de Silverlight avec la page 

4.5 Check-list 



Silverlight et 
ASP.NET 



ASP.NET est une technologie basee sur la plateforme 
.NET de Microsoft qui vous permet de creer des sites 
web simplement. Plongez-vous dans ce chapitre si vous 
souhaitez connaTtre tout ce qu'il faut savoir sur la 
conception et le developpement d'applications web avec 
ASP.NET et Silverlight. 
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4.1 lntroductionaASP.NET 

ASP.NET a acces a toutes les classes du Framework .NET qui est un ensemble de 
composants pouvant etre utilises dans differents langages de programmation (grace a la 
CLR, Common Language Runtime) ; les plus connus sont : 

VB.NET successeur de VB ; 

C#, nouveau langage specialement concu pour la plateforme .NET ; 

J# qui a ete introduit specialement pour permettre la reutilisation des blocs ecrits en 

J++ et attirer les developpeurs Java, etc. 

II en existe bien d'autres (Cobol, PHP, ...). On notera l'arrivee de deux nouveaux, 
recemment : 

IronRuby qui, comme son nom l'indique, est un derive de Ruby ; 
IronPython qui, de la meme maniere, est un derive de Python. 

En resume, peu importe le langage utilise, Microsoft met a votre disposition un ensemble 
d'outils qui vous faciliteront l'ecriture d'une application ou/et d'un site Internet. 
L' ensemble de ces outils constitue le Framework .NET. 

Nous sommes aujourd'hui a la version 3.5 du Framework .NET. La version 3.0 a ete 
introduite avec Vista. Vous pouvez trouver la version 3.5 sur Internet (voir Les prerequis 
dans ce chapitre). 

ASP.NET 

ASP.NET designe un ensemble de technologies qui vont vous simplifier l'ecriture 
d' applications web dynamiques. ASP.NET succede a ASP mais ne vous y trompez pas, ce 
n'est pas du tout la meme chose. Le concept a ete completement repense. 

Dans cet ensemble de technologies on trouvera, par exemple, des outils qui nous 
permettront de faciliter la gestion de la securite. En effet, securiser des pages et creer des 
espaces membres est un jeu d'enfants en ASP.NET. De la meme maniere, la gestion des 
donnees est tres simple de prime abord. Si les composants ASP.NET ne suffisent pas, vous 
avez acces a tout ce que le Framework .NET vous propose. Le but ici n'est pas de decrire 
1' ensemble des fonctionnalites de ASP.NET mais de vous donner tous les outils et 
connaissances de base pour creer et comprendre votre premier site ASP.NET. 
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Prerequis 

Les sceptiques se disent certainement qu'avec Microsoft, il va falloir payer. Mais ce n'est 
pas le cas. On peut bien programmer avec ASP.NET gratuitement. II existe en effet une 
gamme express des produits Microsoft qui vous permet d'obtenir des outils suffisants 
pour la creation de vos premiers projets. 

Vous pouvez des lors employer Visual Web Developer Express pour developper vos sites 
Internet et SQL Server 2005 Express comme base de donnees. 

Vous trouverez ces deux outils ici : http://msdn.microsoft.com/fr-fr/express/aa975050.aspx. 
(]) Les outils en anglais 

Si vous maTtrisez I'anglais, prenez soin de choisir les versions anglaises qui sont plus completes au 
niveau du support et de la compatibility. 

II est beaucoup plus delicat d'installer Silverlight pour Visual Studio dans sa version francaise que dans 
sa version anglaise. 

Si vous desirez directement utiliser les outils professionnels, telechargez Visual Studio 
2008. 

Vous pouvez egalement telecharger le Framework 3.5 a cette adresse : http://www.microsoft 
.com/downloads/details.aspx?Familyld=333325FD-AE52-4E35-B531-508D977D32A6&displaylang=en. 

Cependant, ce n'est pas obligatoire, le Framework 2.0 installe par defaut sur tout les 
Windows (XP, Vista, Windows Server) est largement suffisant pour creer des applications 
web. Le 3.5 apportent de nombreuses nouveautes qu'il n'est pas interessant de connaitre 
quand on debute la programmation web avec ASP.NET. 

Premier exemple 

Que vous possediez Visual Web Developer ou Visual Studio, la procedure est la meme. La 
premiere chose a faire est de creer un site web. Pour cela, rendez-vous dans le menu 
File/New/Web Site. 
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Nouveau site Web 



.NET Framework 3,5 



)E3@ 



Modeles Visual Studio installes 
tg) Site Wet ASP.NET 
•ft Site Web vide 

''f> Site Web d'entites Dynamic Data 

Mes modeles 
Si Rechercher des modeles en ligne... 



,*SWeb de script Silverlight 

S{ Service WCF 

9$ Site Web Dynamic Data 



jft Service Web ASP.NET 

Psite Web des rapports ASP.NET 

j^Site Web ASP.NET Crystal Reports 



Site Web ASP.NET vide (.NET Framework 3.5) 
Emplacement : 

Langage: I Visual C* 



Systeme de fichiers ■* C:\Users\LHome\DocumentsWisualStudio2008\WebSites\WebSrtel - Parcourir,. , 



Fig. 4.1 : Fenetre d'cipplication 

Selectionnez ASP.NET Web Site, donnez-lui un nom et cliquez sur OK. Visual 
Studio/Web Developer cree pour vous un ensemble de fichiers et de dossiers pour vous 
aider a demarrer. Vous pouvez voir ces fichiers dans l'Explorateur de solution. 





| Solution Explorer - C:\. . . yrogrammez\ 









C: \~ \Prog ra m mez \ 



_j App_Data 
3 Default, aspx 
web. con fig 



Fig. 4.2 : 

Explorateur de solution 



Default.aspx est souvent la page par defaut d'un site ASP.NET. Ceci est configurable dans 
IIS, le programme traitant les demandes sur des pages Internet (qui ecoute sur le port 80 
par exemple). C'est ce que fait Apache si vous etes habitue a travailler avec PHP, Ruby, 
etc. 

Default.aspx a un fichier qui lui est attache. II est nomme Default.aspx.es. 
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IB Default. aspx 

^ Default.aspx.es 



Fig. 4.3 : 

Fichier Default.aspx 



C'est dans ce fichier que se trouvera toute la logique metier de notre page. Microsoft a 
voulu separer le design et le code. Vous aurez done tout 1' aspect graphique au niveau de 
Default.aspx et tout l'aspect code au niveau de Default.aspx.es (on appelle le code 
contenu dans ce fichier le code behind). Ceci n'est pas obligatoire, vous pouvez declarer 
le design et le code dans un meme fichier. Le code se trouvera alors entre des balises 
script mais cela nuit a la lisibilite du code et a la comprehension de celui-ci. 

Default.aspx ressemble a ceci lorsque vous l'ouvrez : 

<%@ Page Language="C# " AutoEventWireup="true" CodeFile="Def ault . aspx . cs " 
Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3 . org/TR/xhtmll/DTD/xhtmll- transitional . dtd"> 

<html xmlns="http : //www. w3 . org/19 99/xhtml"> 
<head runat="server"> 

<title>Untitled Page</title> 
</head> 
<body> 

<form id="forml" runat="server "> 
<div> 

</div> 

</ f orm> 
</body> 
</html> 

Cette page ne fait rien du tout. 

Si vous voulez obtenir un apercu dans le navigateur, cliquez du bouton droit sur le nom 
de la page dans l'Explorateur de solution et cliquez sur View in browser. 

Par defaut, votre navigateur se lance et affiche une page blanche. En fait, le contenu de 
votre page doit etre situe entre les balises form. Nous reviendrons plus tard sur ces 
balises. 

La premiere ligne de notre page indique un certain nombre d' informations : 

<%@ Page Language="C# " AutoEventWireup="true" CodeFile="Def ault . aspx . cs " 
Inherits=" Default" %> 
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Cette ligne est appelee une directive. Toutes les directives d'une page commencent par 
<%@ et finissent par %>. Ces directives permettent de declarer des informations necessaires 
au compilateur pour compiler la page. Par exemple, nous avons besoin de savoir quel 
langage est utilise (Language="C#") pour connaitre le compilateur qui traitera la page ou 
le fichier contenant le code (CodeFi 1 e="Def aul t .aspx. cs"). 

Le reste de la page devrait vous etre familier si vous avez l'habitude de programmer des 
sites Internet. 

On retrouve une ligne pour le dtd : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www. w3 . org/TR/xhtml 1/ DTD/xhtml 1- trans it ional .dtd"> 

Q) Visual Studio et les DTD k 

Visual Studio gere bien ce dtd et indique une erreur lorsque vous ne le respectez pas dans votre 
HTML. 

Le reste de la page ne devrait pas vous poser de gros probleme de comprehension, mis 
a part le form. 

<html xmlns="http : //www.w3 . org/ 1 9 99/xhtml"> 
<head runat=" server "> 

<title>Untitled Page</title> 
</head> 
<body> 

<form id="forml" runat="server "> 
<div> 

</div> 

</ f orm> 
</body> 
</html> 

Au niveau du code attache a notre page, nous obtenons ceci : 

using System; 

using System. Configuration; 

using System. Data; 

using System. Linq; 

using System. Web; 

using System. Web . Security ; 

using System. Web . UI ; 
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using System. Web . UI . Html Con t r ol s ; 

using System. Web . UI . WebControls ; 

using System. Web . UI . WebControls . WebParts ; 

using System. Xml . Linq; 

public partial class _Default : System. Web .UI . Page 
{ 

protected void Page_Load (obj ect sender, EventArgs e) 
{ 

} 

} 

(J) Code attache 

Nous avons a chaque fois ce principe de deux fichiers. Un pour le code, I'autre pour la 
representation. En effet, en Silverlight on trouve un fichier XAML et un fichier de code. En ASP.NET, 
nous avons un fichier HTML et un autre fichier pour le code. Ce principe est applique partout dans 
les technologies Microsoft. 

On remarque directement des usings qui permettent de faciliter l'utilisation des 
composants du Framework .NET. 

Par exemple, sans using System. 10, vous devriez ecrire dans votre code : 

System. 10 . File . Exists ("file.txt") ; 

Avec le using, vous simplinez votre code : 

File. Exists ("file.txt") ; 

Les usings qui sont par defaut affiches dependent du Framework que vous utilisez. Ici, 
nous avons employe la derniere version de celui-ci (3.5). Ne vous inquietiez pas si vous 
avez des usings differents des miens. 

Ce qui suit est plus interessant. On voit la declaration d'une classe qui herite de Page et 
declare une methode Page_Load. Cette methode est un exemple A' event handler. Celle-ci 
declenche l'evenement Load de notre page ; elle sera executee a chaque fois que nous 
rechargerons la page, Load en anglais significant Chargement. 

II existe de nombreux evenements declenches au chargement de la page que nous verrons 
un peu plus loin. 
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Outre toutes les balises HTML que vous connaissez, ASP.NET propose de nombreux 
controles qui vous simplifieront l'ecriture de vos applications web. Ces derniers 
commencent tous par <asp :. On trouvera, parmi les plus utilises : 

le Label ; 
le GridView ; 
le Repeater ; 
le Literal, etc. 

Vous trouvez la liste entiere de ces controles dans la toolbox de votre Visual Studio/Web 
Developer. 



A Label 
sbl TextBox 
lab) Button 
QF) LinkButton 
(a) ImageButton 
A Hyperlink 
Tt DropDownList 
= Z ListBox 
0 ChedcBox 

CheckBoxList 
0 RadioButton 

RadioButtonList 
^ Image 
j^J ImageMap 
3 Table 
IE BulletedList 

HiddenField 

Literal 

Calendar 
^ AdRotator 
*j FileUpload 
V Wizard 
|£ Xml 
d MuhtiVievv 
□ Panel 
jxl PlaceHolder 
Q view 

Substitution 



Pour inserer l'un de ces controles dans votre page, selectionnez-le dans votre toolbox et 
deplacez-le sur votre page : 

<%@ Page Language="C# " AutoEventWireup="true" CodeFile="Def ault . aspx . cs " 




f Pointer 




Fig. 4.4 : 

Barre d'outils 



> ! r,r,,!i7P 
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Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www . w3 . org/TR/xhtmll/ DTD/xhtml 1- transitional . dtd"> 

<html xmlns="http : //www. w3 . org/19 99/xhtml"> 
<head runat="server"> 

<title>Untitled Page</title> 
</head> 
<body> 

<form id="forml" runat="server "> 
<div> 

<asp:Label ID="Labell" runat=" server " Text=" Mon premier 
label"x/asp: Label> 
</div> 
</ f orm> 
</body> 
</html> 

Nous avons par exemple ajoute un label a notre page. Remarquez la propriete 
runat="server" qui permet d'indiquer que ce controle devra etre evalue au niveau du 
serveur. 

Si vous lancez la page de votre Explorateur, vous verrez que notre asp : label a ete 
transforme en une balise span : 

<span id="Labell">Mon premier label</span> 

Que s'est-il passe ? Le compilateur a vu un controle qui devait etre interprete par le 
serveur, celui-ci l'a traite pour le remplacer par du HTML, comprehensible par le 
navigateur. 

Dans ce cas, l'utilisation d'un controle ne s'avere pas utile. L'utilite vient lorsque vous 
traitez ce controle dans le code behind. Vous avez en effet la possibilite d'editer les 
proprietes du label en code behind (Text, etc.) : 

protected void Page_Load (obj ect sender, EventArgs e) 
{ 

Label 1. Text = "Ce label a ete traite dans le code behind"; 

} 

Cela donnera le resultat suivant : 

<span id="Labell">Ce label a ete traite dans le code behind</span> 
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(J) Code attache 

Ce que vous ecrivez dans le code behind pour la propriete Text prend le dessus sur ce que vous avez 
ecrit dans le design de la page car I'evenement Load de la page passe apres la traitement du render 
de la page. La propriete de votre label est dans un premier temps egale a Mon premier label mais elle 
est ensuite reecrite au moment du Load. 



Le Web.config 

Le Web.config est un nchier que vous retrouvez a la racine de votre application et qui 
contient toutes les informations sur la configuration de celle-ci. Si vous ouvrez le 
Web.config de votre application web, vous trouverez une serie d' informations. Parmi les 
informations importantes : 

La declaration des elements qui se trouveront dans le Web.config 

<configSections> 

<sectionGroup name=" system. web . extensions" 

type=" System. Web .Configuration . SystemWebExtens ions Sec tionGroup, 
System .Web . Extensions, Version=3 . 5 . 0 . 0 , Culture=neutral, 
PublicKeyToken=31BF385 6AD3 64E35"> 
<sectionGroup name="scripting" 

type="System.Web. Configuration . ScriptingSectionGroup, 
System .Web . Extensions , Version=3 . 5 . 0 . 0 , Culture=neutral, 
PublicKeyToken=31BF38 56AD364E35"> 
<section name="scriptResourceHandler " 

type=" System. Web . Configuration . Script ingScriptResourceHandler Section, 
System .Web . Extensions , Version=3 . 5 . 0 . 0 , Culture=neutral, 
PublicKeyToken=31BF38 56AD3 64E35" requirePermission=" false" 
allowDef inition="MachineToApplication"/> 

</ sectionGroup> 
</sectionGroup> 
</ sectionGroup> 
</ conf igSections> 

Les differentes libraires dont a besoin notre application 

<assemblies> 

Odd assembly="System. Core, Version=3 . 5 . 0 . 0 , Culture=neutral, 

PublicKeyToken=B77A5C561934E08 9"/> 
Odd assembly="System. Web . Extensions, Ver sion=3 . 5 . 0 . 0 , 

Culture=neutral, PublicKeyToken=31BF38 56AD364E35"/> 
Odd assembly="System. Data . DataSetExtensions, Version=3 . 5 . 0 . 0 , 

Culture=neutral, PublicKeyToken=B7 7A5C561 934E08 9" /> 
</ assemblies> 
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La declaration des contrdles ASP.NET 

<pages> 

<controls> 

Odd tagPref ix="asp" namespace="System. Web . UI " 
assembly="System. Web .Extensions , Version=3 .5.0.0, 
Culture=neutral, PublicKeyToken=31BF385 6AD364E35"/> 

Odd tagPref ix="asp" namespace="System. Web . UI . WebControls " 
assembly="System. Web .Extensions , Version=3 .5.0.0, 
Culture=neutral, PublicKeyToken=31BF385 6AD364E35"/> 
</ controls> 

</ pages> 

La declaration de nos chaines de connexion vers une base de donnees 

<connectionStrings> 

Odd name="LimbourgBDConnectionString" connectionString="Data 

Source=. \SQLEXPRESS; AttachDbFilename= | DataDirectory | \ProgrammezBD .mdf ; 

Integrated Security=True ; User Instance=True" 

providerName="System. Data . SqlClient"/> 
</ connectionStrings> 

4.2 Lescontr6lesASP.NET 

Microsoft vous fournit des contrdles que vous pouvez utiliser pour enrichir vos 
applications web. On peut repertorier ces controles en plusieurs categories. 

Les controles standard 

Ces controles vous permettent d'afficher des elements standard : boutons, labels, champs 
de texte, etc. On pourra par exemple facilement creer un formulaire simple a l'aide de ces 
controles : 

osp: Label ID="lbNom" runat="server" Text="Nom"x/asp : Label> : 

Osp:TextBox ID="tbNom" runat="server "></asp : TextBox> <br /> 
Osp: Label ID="lbPrenom" runat="server" 
Text="Prenom"x/asp : Label> : 

Osp:TextBox ID="tbPrenom" runat="server"x/asp : TextBox> <br /> 
Osp:Label ID="lbEmail" runat="server " Text="Email "></asp : Label> : 
Osp:TextBox ID="tbEmail" runat="server "></asp : TextBox> <br /> 
Osp: Label ID="lb" runat="server" Text="J'ai plus de 18 ans"> 
</asp:Label> : 

Osp:CheckBox ID="cbPLusDel8ans" Text="" runat="server " /xbr /> 
Osp: Button ID="btGo" runat="server " Text="Envoyer " /> 
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Ceci sera affiche sur votre navigateur Internet : 

| | ► Fig. 4.5 : 

N«">-L II Controles de base d'ASP. NET 

PrenomjJ ] I 

Email: 

J'ai phis de 1 8 ans : 
Envoyer 

On peut regarder ce que cela genere au niveau du code source : 

<span id="lbNom">Nom</span> : 

<input name="tbNom" type="text" id="tbNom" /> <br /> 
<span id="lbPrenom">Prenom</span> : 

<input name="tbPrenom" type="text" id="tbPrenom" /> <br /> 
<span id="lbEmail ">Email</ span> : 

<input name="tbEmail" type="text" id="tbEmail" /> <br /> 
<span id="lb">J'ai plus de 18 ans</span> : 

<input id="cbPLusDel8ans" type="checkbox" name="cbPLusDel8ans" /xbr /> 
<input type=" submit" name="btGo" value="Envoyer " id="btGo" /> 



Les controles de validation 

ASP.NET vous fournit un ensemble de controles qui vous permettront d'effectuer des 
verifications sur les donnees entrees par les utilisateurs. On peut done ameliorer notre 
formulaire en ajoutant un controle pour verifier si l'email n'est pas nul : 

<asp: Label ID="lbNom" runat="server " Text="Nom"x/asp : Label> : 
<asp:TextBox ID="tbNom" runat="server "></asp : TextBox> <br /> 
<asp:Label ID="lbPrenom" runat="server" Text="Prenom"x/asp : Label> : 
<asp:TextBox ID="tbPrenom" runat="server"x/asp: TextBox> <br /> 
<asp:Label ID=" IbEmail " runat="server " Text="Email "x/asp : Label> : 
<asp:TextBox ID="tbEmail" runat="server "x/asp : TextBox> 
<asp : RequiredFieldValidator 

ID="ValEmail" ControlToValidate="tbEmail" runat="server " 
ErrorMessage="Email Requis "x/asp : RequiredFieldValidator> <br /> 
<asp: Label ID="lb" runat="server" Text="J'ai plus de 18 ans"> 
</asp:Label> : 

<asp : CheckBox ID="cbPLusDel8ans" Text="" runat="server " /xbr /> 
<asp: Button ID="btGo" runat="server " Text="Envoyer " /> 

II existe plusieurs controles de ce type : 

RequiredFieldValidator ; 
RangeValidator ; 
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RegularExpressionValidator ; 
CompareValidator ; 
CustomValidator. 

Vous pouvez egalement creer vos propres controles de validation. 

Les controles riches 

ASP.NET vous propose quelques controles avec une reelle plus-value pour vous. Par 
exemple, creer un calendrier dynamique en ASP.NET est vraiment tres simple. II existe 
en fait un controle asp : calendar qui vous permet d'afficher un calendrier dynamique. 
Dans ce type de controles, on retrouve aussi la possibilite de creer des wizards facilement 
(exemple : creation de formulaires en plusieurs etapes). 

Voici un exemple de calendrier en ASP.NET : 

<asp : Calendar id="Calendar 1 " runat="server" BorderStyle="Double" 
BorderWidth=" 3px" DayNameFormat="FirstTwoLetters " 
FirstDayOfWeek="Monday" ShowGr idLines="True" CellPadding="0 " 
SelectedDate="2 004-0 5-03 "> 

<OtherMonthDayStyle ForeColor="LightGray"> 
</OtherMonthDayStyle> 
</ asp : Calendar> 

Les controles de donnees 

Les controles de donnees permettent d'aller rechercher facilement des donnees dans une 
base ou un fichier XML. 

Vous utiliserez ces controles pour ce qui concerne la visualisation, l'ajout, la modification 
ou la suppression des donnees. 

Vous pourrez par exemple aisement afficher les donnees dans un tableau a l'aide d'un 
GridView et un DataSource (ObjectDataSource, SQLDataSource ou XMLDataSource en 
fonction de la source des donnees). 

(J) Framework 3.5 etASP.NET 3.5 

Le Framework 3.5 a apporte son lot de nouveautes a ce niveau avec l'ajout du ListView, du DataPager 
et du LINQDataSource. 
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Ci-apres, un exemple d'utilisation du controle repeater et SQLDataSource : 

<asp : Repeater ID="Repeater3" runat="server" DataSourceID="DSCC"> 
<ItemTemplate> 

<hl><%# Eval ("Prenom") %> <%# Eval("Nom") %></hl> 
<p><%# Eval ("Titre") %> - <%# Eval ( "Biographie" ) %></p> 
</I temTemplate> 
</asp : Repeater> 

<asp: SqlDataSource ID="DSCC" runat="server" 

ConnectionString="<%$ ConnectionStrings : LimbourgBDConnectionString %>" 
SelectCommand="SELECT TOP 3 [Personneld] , [Norn] , [Prenom] , 
[Biographie], [Titre] FROM [Personnel WHERE ([Personneld] = 
SPersonneld) "> 

<Select Parameter s> 

<asp : QueryStringParameter Def aultValue=" 1 " Name=" Personneld" 
QueryStringField="id" Type="Int32" /> 
</ SelectParameters> 
</ asp : SqlDataSource> 

Ces quelques lignes vont permettre d'afficher une liste de personnes. Eval permet de 
mapper un element avec un champ de la base de donnees. Le repeater est comme une 
boucle qui parcourt tous les elements de la source de donnees passee comme valeur de 
la propriete DataSourcelD. 

Ici la source de donnees contient les resultats de la requete SQL passee comme valeur a 
la propriete Sel ectCommand : 

SELECT TOP 3 [Personneld], [Norn], [Prenom], [Biographie], [Titre] FROM 
[Personne] WHERE ([Personneld] = @PersonneId) 

@PersonneId designe un parametre que nous definissons juste apres : 

<S elect Parameter s> 

<asp : QueryStringParameter Def aultValue=" 1 " Name="PersonneId" 
QueryStringField="id" Type="Int32" /> 
</ Select Par ameters> 

On indique que le parametre doit etre trouve dans l'URL de la requete. On va chercher 
le parametre id de l'URL. S'il n'existe pas, on prend par defaut la valeur 1. 

Pour simplifier l'ecriture de ce code, Visual Studio vous fournit un wizard de parametrage 
d'un DataSource. Pour utiliser ce dernier, rendez-vous en mode Design et cliquez sur la 
petite icone en haut a droite de votre SQLDataSource. 
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asp:5qlDataSource<OSC9 



Fig. 4.6 : 

Data source 



Cliquez sur Configure DataSource. Une nouvelle fenetre apparait ; vous avez la 
possibility de definir votre chaine de connexion a votre base de donnees. Cette chaine 
peut etre definie en cliquant sur New Connection et en remplissant les differents champs 
de connexion (nom du serveur, login, mot de passe, base de donnees). 

En cliquant sur Suivant, un utilitaire vous permet de creer votre requete. 
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Configure the Select Statement 



How would you fcke to retrieve data from your database? 

<~ Specify a custom SQL statement or stored procedure 
G Specify ccajmns from a table 0» vww 
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r* Retum only untojue rows 
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SELECT statement: 



SELECT [EvenUD], [Name], [beu]. [Date] FROM [Agenda] 



1 



Fig. 4.7 : 

Editeur de requetes 



Cliquez sur Suivant puis sur Terminer. Votre DataSource est configure. 

Pour en savoir plus sur SQLDataSource, consultez le lien : http://msdn.microsoft.com/fr-fr/ 
library/system.web.ui.webcontrols.sqldatasource.aspx. 

Les controles de navigation 

Ces controles vous permettent d'afficher des elements de navigation standard : menus, 
arbres d'elements. En effet, on peut facilement afficher un arbre d'elements avec le 
controle asp :TreeView : 

<asp : TreeView ID="TreeViewl" runat="server"> 
<Nodes> 

<asp : TreeNode Text="Ordinateur "> 
<asp : TreeNode Text="Favory"> 
<asp : TreeNode Text="News"> 
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<asp: TreeNode Text="MSN" NavigateUrl="http : / /www . msn . com" /> 
<asp:TreeNode Text = "MSNBC News" 
NavigateUrl="http : / / www .msnbc . msn . com" /> 



</asp : TreeNode> 
</ asp : TreeNode> 
</ asp : TreeNode> 
</Nodes> 
</asp : TreeView> 

On obtient ceci : 



- Ordinatem 



Vous pouvez egalement mapper le contenu de votre TreeView a un fichier XML, par 
exemple. Pour plus d' information sur les controles de navigation : http://quickstarts.asp.net/ 
QuickStartv20/aspnet/doc/ctrlref/navigation/default.aspx. 

Les controles de login 

Ces controles sont tres souvent utilises pour tout ce qui est gestion utilisateur. Vous 
pouvez facilement gerer des comptes utilisateur avec ASP.NET. Celui-ci vous fournit les 
controles pour les actions suivantes : 

login d'un utilisateur ; 

affichage du nom de l'utilisateur actuellement connecte ; 
enregistrement d'un utilisateur ; 
perte de mots de passe ; 
changement de mot de passe ; 

affichage d'elements en fonction du statut de l'utilisateur (connecte, non connecte, 
dans un groupe, ou pas) ; 

gestion de roles d'utilisateur (administrateur, membre, etc.). 

Pour permettre l'utilisation de ces composants, vous devez regler ces derniers a l'aide de 
1' administration centrale de votre site ASP.NET : 



5 Favory 
- Ness 



Vue d'un arbre de donnees 



MSN 

MSNBC News 




Fig. 4.9 : 



Centrale d'administration 
d 'ASP. NET 
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Dans l'onglet Securite, vous pouvez choisir d'utiliser ASP. NET Membership Provider en 
cliquant sur le lien Selectionnez le type d'authentification. Selectionnez Par internet. 

Pour plus d' informations sur les composants login, consultez le lien suivant : http:// 
quickstarts.asp.net/QuickStartv20/aspnet/doc/ctrlref/login/default.aspx. 

Les controles HTML 

Vous pouvez utiliser les controles HTML que vous avez l'habitude d'employer et 
interagir avec eux dans le code behind en leur ajoutant la propriete runat=server : 

Entrez votre nom : <input id="Name" type=text size=40 runat=server> 

Vous pouvez alors modifier les proprietes de ces controles dans le code behind : 

Name. Value = "ici"; 

Lorsque ASP.NET voit un tag HTML avec la propriete runat, il reconnait un controle 
ASP.NET. Par exemple, ici, il sait que l'input est un Html InputText. 

Plus d' informations ici : http://quickstarts.asp.net/QuickStartv20/aspnet/doc/ctrlref/html/default.aspx. 
Postback et ViewState 

Voici une petite introduction a ce qui caracterise le modele de programmation ASP.NET. 
Revenons sur notre exemple de formulaire. Lorsque nous voulons envoyer les 
informations de notre formulaire, nous devons gerer un evenement sur le clic du bouton. 
Pour cela, nous lui declarons un handler : 

<asp:Button ID="btGo" runat="server" Text="Envoyer " onclick="btGo_Click" /> 

Lorsque vous cliquez sur le bouton, il y a un Postback ou une requete POST sur la page 
en cours. Vous devez gerer cet evenement dans le code behind sur la methode btGo 
_Click : 

protected void btGo_Click (object sender, EventArgs e) 
{ 

// Traitement ici 

} 

En HTML, l'element form permet d'envoyer une requete POST (ou GET). Si on regarde 
le code source de notre page, on voit que notre form runat=server s'est transforme en 
formulaire : 
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<form name="forml" method="post" action="Default . aspx" 

onsubmit="j avascript : return WebForm OnSubmit ( ) ; " id="forml"> 

</form> 

L' action du formulaire est bien la page actuelle. 

Le JavaScript est la car il y a des choses a verifier apres l'envoi du formulaire (a cause 
de notre validator). 

On remarque egalement un champ de type input appele ViewState : 

<input type="hidden" name=" VIEWSTATE" id=" VIEWSTATE" 

value="/wEPDwUKLTcwNj kwM j 1 1 M2 QYAQUeX 19Db250cm9sclJl cXVp cmVQb 3N 0 QmF j a 
0tleV9f FgEFDWNiUExlc0RlMThhbnOWq/eV0Z6qaaIUowq31P+t4xSruA==" /> 

Ce champ hidden est gere automatiquement par ASP.NET pour sauvegarder l'etat des 
differents controles de la page. C'est grace a cela que lorsque vous effectuez un PostBack, 
vos informations sont toujours visibles dans le formulaire. Vous n'avez done pas besoin 
de sauver vous-meme l'etat des differents elements de votre page en ASP.NET. 

4.3 Les controles ASP.NET pour Silverlight 

Avec l'arrivee et l'utilisation de plus en plus massive de Silverlight, Microsoft a du 
reflechir pour faciliter l'utilisation de Silverlight dans ASP.NET. En effet, inserer 
Silverlight comme nous l'avons vu auparavant dans le livre n'est pas une bonne idee. 

Voici la structure HTML d'une page avec Silverlight a l'interieur : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http : //www.w3 . org/TR/xhtmll/ DTD/xhtml 1- transitional . dtd"> 
<html xmlns="http : //www. w3 . org/1999/xhtml" > 
<!-- saved from url= ( 00 14 ) about : internet --> 
<head> 

<title>Mastermind</title> 

<style type="text/css"> 
html, body { 
height: 100%; 
overflow: auto; 

} 

body { 

padding: 0; 
margin: 0; 

} 
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#SilverlightControlHost { 
height: 100%; 

} 

</style> 

<script type="text/ j avascr ipt"> 

function onSilverlightError (sender, args) { 

var appSource = ""; 

if (sender != null && sender != 0) { 

appSource = sender . getHost (). Source; 

} 

var errorType = args .ErrorType; 
var iErrorCode = args . ErrorCode; 

var errMsg = "Unhandled Error in Silverlight 2 Application 
" + appSource + "\n" ; 

errMsg += "Code: "+ iErrorCode + " \n"; 
errMsg += "Category: " + errorType + " \n"; 
errMsg += "Message: " + args . ErrorMessage + " \n"; 

if (errorType == "ParserError " ) 
{ 

errMsg += "File: " + args . xamlFile + " \n"; 
errMsg += "Line: " + args . lineNumber + " \n"; 
errMsg += "Position: " + args . charPosition + " \n"; 

} 

else if (errorType == "RuntimeError " ) 
{ 

if (args . lineNumber != 0) 
{ 

errMsg += "Line: " + args . lineNumber + " \n"; 
errMsg += "Position: " + args . charPosition + " \n"; 

} 

errMsg += "MethodName: " + args . methodName + " \n"; 

} 



throw new Error (errMsg) ; 

} 

</ script> 
</head> 



<body> 

<!-- Les erreurs d' execution Silverlight s ' af f icheront ici. 
II s'agit d' informations de debogage qui doivent etre supprimees ou 
masquees, une fois le debogage termine --> 

<div id=' errorLocation' style="f ont-size : small; color: Gray; "></div> 
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<div id="SilverlightControlHost"> 

<object data="data : application/ x-Silverlight, " 

type="application/x-Silverlight-2" width="10 0%" height="100%"> 
<param name="source" value="Mastermind . xap"/> 
<param name="onerror " value="onSilverlightError " /> 
<param name="background" value="white" /> 
<param name="minRuntime Version" value="2 . 0 . 31005 . 0" /> 
<param name="autoUpgrade" value="true" /> 
<a href ="http: //go .microsoft . com/f wlink/ ?LinkID=12 4 807 " 
style="text-decoration : none; "> 
<img src="http : //go .microsoft . com/fwlink/?LinkId=108181" 
alt="Telechargez Microsoft Silverlight" style="border-style : none"/> 
</a> 

</obj ect> 

<i frame 

style=' visibility: hidden; height : 0 ; width : 0 ; border : Opx' ></ if rame> 
</div> 
</body> 
</html> 

On remarque differents elements : 

Ce n'est pas dans la logique de AS.P/V£T d'utiliser des controles HTML s'initialisant 
avec JavaScript. 

Cette page ne ressemble en rien a ce que nous avons l'habitude de voir en ASP.NET. 
La page a perdu beaucoup de lisibilite par rapport a ASP.NET. 

D' autre part, nous avons vu dans un autre chapitre ce que generait Expression Encoder : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http: //www.w3c. org/TR/1 9 99/REC-html40 1-1 9 99122 4/loose . dtd"> 
<!-- saved from url= ( 00 14 ) about : internet --> 
<html xmlns="http : //www. w3 . org/19 99/xhtml"> 



<head> 

<script type=' text/ j avascript ' src="Microsof tAj ax . j s "></ script> 

<script type=' text/ j avascript' src="Silverlight . j s "></ script> 

<script type=' text/ j avascript' src="SilverlightControl . j s"></ script> 

<script type=' text/ j avascript' src="SilverlightMedia . j s "></ script> 

<script type=' text/ j avascript' src="ExpressionPlayer . j s "></script> 

<script type=' text/ j avascript' src="PlayerStrings . j s "></ scr ipt> 

<script type=' text/ j avascript' src="player . j s"x/script> 

<script type=' text/ j avascript' src="StartPlayer . j s "></ script> 
<titlex/title> 
<style type="text/css"> 

html, body { margin: 0; padding: 0; height: 100% } 
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fdivPlayer 0 { min-height: 100%; height: 


100%; } 


</style> 




</head> 




<body style="background- color : black, -mar gin 


: 0, 0, 0, 0; over flow : auto ; "> 


<div id="divPlayer 0"> 




<script type=' text/ j avascript' > 




var player = new StartPlayer 0() 




</ script> 




</div> 




</body> 




</html> 





Meme chose ici, il est tres rare de voir l'insertion de fichier JavaScript comme cela dans 
ASP.NET. 

Pour remedier aux deux problemes, Microsoft a introduit deux nouveaux controles dans 
ASP.NET : 

Silverlight ; 
MediaPlayer. 

Le controle MediaPlayer 

Le controle serveur ASP.NET MediaPlayer vous permet d'integrer des sources de media 
telles que des elements audio (WMA) et video (WMV) dans une application web, sans 
qu'il soit necessaire de disposer de connaissances en XAML ou en JavaScript. Le controle 
MediaPlayer peut utiliser des apparences pre generees, ou vous pouvez creer des 
apparences personnalisees. Par exemple, vous pouvez referencer un document XAML 
personnalise genere via Microsoft Expression Encoder et prenant en charge des legendes, 
des chapitres et des marqueurs dans la source du media. Lorsque vous configurez le 
controle MediaPlayer pour referencer une apparence pre generee, le document XAML 
associe est copie dans le projet. La propriete Medi aSki nSource du controle MediaPlayer 
est egalement configuree pour pointer sur 1' apparence referencee. 

Linteraction entre le controle MediaPlayer et la page peut se faire a l'aide de JavaScript. 

Ce lecteur ASP.NET s' utilise tres facilement. Vous devez referencer un fichier a jouer (par 
exemple, un fichier .wmv, .wma ou .mp3), puis vous selectionnez une apparence integree. 
Le controle serveur MediaPlayer reconnait les formats de media pris en charge par le 
plug-in Silverlight : 

<asp : MediaPlayer 

ID="MediaPlayerl " 
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runat=" server" 

MediaSource="~/Media/video . wmv" 

Media S kin Sour ce= " ~ /MediaS kins /Prof ess ional . xaml " 
ScaleMode=" Stretch" 
AutoLoad= "true" 
AutoPlay="f alse" 
PluginBackground=" Black" 
Height="240px" 
Width="320px"> 
</asp :MediaPlayer> 

Pour fonctionner, le MediaPlayer a besoin d'un controle ASP. NET Scri ptManager. Ce 
controle permet la gestion des elements JavaScript. 

Dans une page ASP.NET qui utilise le JavaScript, le Scri ptManager charge les scripts 
JavaScript necessaires au bon fonctionnement de la page : 

<%@ Page Language="C#" AutoEventWireup="true" 

CodeBehind="Def ault . aspx . cs " Inherits="WebApplicationl . Default" %> 

<%@ Register Assembly="System. Web . Silverlight" 
Name spa ce=" System. Web . UI . SilverlightControls " 
TagPref ix="asp" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www.w3 . org/TR/xhtmll/ DTD/xhtml 1- transitional . dtd"> 

<html xmlns="http : //www. w3.org/1999/xhtml" > 
<head runat=" server "> 

<titlex/title> 
</head> 
<body> 

<form id="forml" runat="server "> 
<div> 

<asp: MediaPlayer ID="MediaPlayerl " runat="server" Height="240px" 
Width="320px" 

MediaS ource="~/Lake . wmv"> 
</asp :MediaPlayer> 
<br /> 

<asp : ScriptManager ID="ScriptManagerl" runat=" server "> 
</ asp : ScriptManager> 
</div> 
</ f orm> 
</body> 
</html> 
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Si vous executez ce code et que vous regardiez le code source, vous trouverez 
enormement de JavaScript, notamment pour la creation du lecteur : 

<span id="MediaPlayerl parent"x/span> 
<script type="text/ j avascript"> 
//<! [CDATA [ 

Sys . UI . Silverlight . Control . createObj ect ( ' MediaPlayerl parent' , 

' \u003cobject type="application/x-Silverlight" id="MediaPlayerl " 
style="height : 2 40px; width : 32 0px; ">\r\n\t\u00 3ca 

href ="http: //go2 .microsoft . com/ f wlink/ ?LinkID=114 57 6&v=l . 0 ">\u003cimg 
src="http : //go2 .microsoft . com/f wlink/ ?LinkID=l 081 81 " 

alt="Telechargez Microsoft Silverlight" style="border-width : 0 ; " /> 

\u003c/a>\r\n\u003c/object>' ) ; 
//]]> 
</ script> 








Fig. 4.10: 

Lecteur Silverlight 



Le controle MediaPlayer permet de faire exactement la meme chose que ce que vous 
aviez fait avec Expression Encoder. II en va de meme pour la gestion des chapitres. Vous 
pouvez facilement ajouter des chapitres a votre video : 

<%@ Page Language="C# " %> 

<%@ Register Assembly="System. Web . Silverlight" 
Name spa ce=" System. Web . UI . Silver lightControls " 
TagPref ix="asp" %> 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3 . org/TR/xhtmlll/DTD/xhtmlll . dtd"> 
<html > 

<head id="Headl" runat="server "> 

<title>ASP.NET Controls for Silverlight</title> 

<link href ="~/SilverlightStyles . ess" type="text/css" rel="Stylesheet" /> 
</head> 
<body> 

<form id="forml" runat="server "> 
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<asp : ScriptManager ID="ScriptManagerl" runat="server" 

En ab le Partial Render ing=" false" /> 
<div> 

<asp :MediaPlayer runat="server " ID="MediaPlayer 1 " 
ScaleMode=" Stretch" AutoPlay="true" 

MediaSource=" . . /media/ expressions tudio . wmv" Height =" 4 8 0 " 

Width="640" 
PI uginBackground= "Black" 

Media Skin Sou rce=" . ./skins /Professional. xaml "> 
<Chapter s> 

<asp :MediaChapter 
ThumbnailSource=" . . /media/MarkerThumb 00 .00 . 00 . jpg" 
Position="0 . 0" Title="Chapter 1" /> 
<asp :MediaChapter 
ThumbnailSource=" . . /media/MarkerThumb 00 .00 . 10 . jpg" 
Position="10" Title="Chapter 2" /> 
<asp :MediaChapter 
ThumbnailSource=" . . /media/MarkerThumb 00 .00 . 24 . jpg" 
Position="24" Title="Chapter 3" /> 
</ Chapters> 
</asp : Media PI ay er> 
</div> 
</ f orm> 
</body> 
</html> 

L' element Chapters que vous ajoutez permet de definir des chapitres dans votre video. 



j) Information en provenance de votre base de donnees 

II se peut que certaines informations proviennent de votre base de donnees comme les chapitres et 
I'emplacement sur fichier de votre video. Dans ce cas, vous pouvez creer un Web service qui expose 
sous forme XML les donnees de la video. En effet, avec la propriete MediaDefinition vous pouvez 
donner I'emplacement d'un fichier XML qui definit votre video en respectant le modele suivant : 



<mediaDef inition> 
<medialtems> 

<medialtem mediaSource="video .wmv" 
placeholderSource="imageO . jpg"> 
<chapters> 

<chapter position="5 . 00 " 

thumbnailSource=" imagel . jpg" 
title="markerl" /> 
<chapter position="10 . 00" 

thumbnailSource="image2 . jpg" 
title="marker2" /> 
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</ chapter s> 
</mediaItem> 
</ medialtems> 
</mediaDef inition> 

Comme indique precedemment dans ce chapitre, vous pouvez interagir avec le lecteur 
Silverlight via JavaScript. 

MediaPlayer et JavaScript 

Le JavaScript permet d'interagir de maniere poussee avec le lecteur Silverlight. Vous 
pouvez par exemple creer sur la page d'autres boutons qui permettent d'effectuer les 
actions pause ou pi ay. Ces boutons contactent alors une fonction JavaScript connectee au 
lecteur. 

On peut aussi mettre a jour certains elements de la page, par exemple savoir quand un 
chapitre change ou quand le statut change. Vous pouvez ainsi declarer une serie 
d'evenements dans votre lecteur : 

<asp :MediaPlayer runat=" server " ID="MediaPlayerl " Width="400" 
Height="300" ScaleMode=" Stretch" 

MediaSource=" . . /media/expressionstudio .wmv" Volume="1.0" 
PlaceholderSource=" . . /media/placeholder . JPG" 
OnClientMediaOpened="onMediaOpened" 
OnClientChapterStarted="onChapter Changed" 
OnClientMarkerReached="onMar ker Reached" 
OnClientCurrentStateChanged="onStateChanged" 
OnClientVolumeChanged="onVolumeChanged"> 
<Chapters> 

<asp :MediaChapter 
ThumbnailSource=" . . /media/ExpressionStudio 
MarkerThumb 00.00.00.jpg" Position="0 . 0" ~~ 
Title="Opening credits and movie start." /> 
<asp :MediaChapter 
ThumbnailSource=" . . /media/ExpressionStudio 
MarkerThumb 00.00.10.2390000.jpg" 
Position="10 .2390000" 

Title="Designing and selecting." /> 
<asp :MediaChapter 
ThumbnailSource=" . . /media/ExpressionStudio 
MarkerThumb 00.00.24.1360000.jpg" 
Position="24 . 1360000" 

Title="Producing designs." /> 
<asp :MediaChapter 
ThumbnailSource=" . . /media/ExpressionStudio 
MarkerThumb 00.00.37.9290000.jpg" 
Position="37 . 9290000" 
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Title="Checking inventory and orders." /> 
<asp :MediaChapter 
ThumbnailSource=" . . /media/ExpressionStudio 
MarkerThumb 00.00.52.3490000.jpg" 
Position="52 .3490000" 

Title="Purchasing. " /> 
<asp : MediaChapter 
ThumbnailSource=" . . /media/ExpressionStudio MarkerThumb 
00.00.58.6180000.jpg" Position="58 . 6180000 77 

Title="Reviewing. " /> 
<asp : MediaChapter 
ThumbnailSource=" . . /media/ExpressionStudio 
MarkerThumb 00.01.14.0820000.jpg" 
Position="74 . 0820000" 

Title="End credits." /> 
<asp :MediaChapter 
ThumbnailSource=" . . /media/ExpressionStudio 
^» MarkerThumb 00.01.22.9640000.jpg" 
+■ Position="82 . 9640000" 

Title="Silverlight end." /> 
</Chapters> 
</asp : MediaPlayer> 

On voit ici la declaration de plusieurs evenements : 

OnCl ientMediaOpened ; 
OnCl ientChapterStarted ; 
OnCl ientMarkerReached, etc. 

A chacun de ces evenements correspond une fonction JavaScript, comme ici dans le 
changement de chapitre qui modifie le contenu HTML d'une zone HTML : 

function onChapterChanged (sender, args) { 

// When the chapters change, set the chapter image and text in 
markup. 

var chapter = player. get currentChapter ( ) ; 
if (chapter === -1) { 

$get ( ' Chapterlmage' ) . src = ".. /media/placeholder . jpg" ; 

$get ( ' Chapterlndex' ) . innerHTML = "(none)"; 

} 

else { 

$get (' Chapterlmage' ). src = 

player . get_currentChapter ( ) . get_thumbnailSource ( ) ; 

$get (' Chapterlndex' ). innerHTML = "#" + 

( player. get_chapterStarted() +1) + " - " + 

player . get_currentChapter ( ) . get_title ( ) ; 

$get (' MovieTime' ). innerHTML = player. get position(); 



SOB 



Les controles ASP.NET pour Silverlight 4 



} 



Si on veut controler le lecteur (play, pause, stop), nous pouvons egalement le faire en 
JavaScript : 

function onPlayO { 

player . play ( ) ; 

$get (' pause' ). disabled = ""; 

$get (' stop' ) .disabled = ""; 

$get ('play' ) .disabled = "disabled"; 

} 

function onPauseO { 
player . pause ( ) ; 

$get (' pause' ). disabled = "disabled"; 
$get ('play' ) .disabled = ""; 

} 

function onStopO { 
player . stop ( ) ; 

$get (' pause' ). disabled = "disabled"; 
$get (' stop' ) .disabled = "disabled"; 
$get ('play' ) .disabled = ""; 

} 



C'est a peu pres tout ce que vous pouvez effectuer avec le controle MediaPlayer. 

Le controle Silverlight 

Grace a ce controle, vous pouvez integrer du code XAML et tout code de prise en charge 
(un assembly de code manage, un module de script de langage dynamique manage ou des 
bibliotheques JavaScript client, voir annexe) dans votre site web. 

(D Code manage 

Le code manage est un code compile. A I'inverse d'un code interprets, le code compile est organise 
de maniere intelligente. Plus d'information : http://en.wikipedia.org/wiki/Compiler. 

Lorsque vous creez un projet Silverlight dans Visual Studio, vous avez directement la 
possibilite de definir un projet ASP.NET associe. Des que cette connexion entre les deux 
projets est creee, vous voyez apparaitre un fichier xap dans le dossier ClientBin. 
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Le controle Silverlight a besoin de ce fichier xap. C'est ce dernier qui va etre interprete. 



^\ Solution 'SilverlightApplication2' (2 projets] * 
El ^ SilverlightApplication2 

GE Properties 

El &i References 

B Appjcaml 

1 SilverlightApplication2.Web 

+ Properties = 

t j References 

App_Data 

ClientBin 



Si vous creez un rectangle en XAML, que vous compiliez votre application ( [ Ctrl ] + [ Maj 1 +fB]) 
et que vous utilisiez le fichier xap dans votre controle Silverlight, vous obtenez le resultat 
escompte : 

<UserControl x: Class="SilverlightApplication2 . Page" 

xmlns="http : //schemas .microsoft . com/winfx/2006/xaml/presentation" 
xmlns : x="http : //schemas .microsoft. com/winf x/2 00 6/xaml" 
Width="400" Height="300"> 

<Grid x : Name="LayoutRoot " Background="White"> 
<Rectangle Height="83" Margin=" 68 , 50 , 137 , 0 " VerticalAlignment="Top" 
Stroke="#FF000000"> 
<Rectangle . Fill> 

<LinearGradientBrush EndPoint="0 . 5, 1" StartPoint=" 0 . 5, 0"> 
<GradientStop Color=" #FF0 0 00 0 0 "/> 
<GradientStop Color=" #FFA312 12 " Offset="l"/> 
</LinearGradientBrush> 
</ Rectangle . Fill> 
</Rectangle> 

</Grid> 
</ User Con trol> 

Au niveau de la page HTML/ASP. NET : 

<%@ Page Language="C# " AutoEventWireup="true" %> 




Fig. 4.11 : 

Explorateur de solution 



SilverlightApplication2.xap 
E: & Media 

■Sh] video.wmv 



L+j [A Default.aspx 
T?l playerxaml 
a] Silverlight.js 
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<%@ Register Assembly="System. Web . Silverlight" 
Name space=" System. Web . UI . Silver lightControls " 
TagPref ix="asp" %> 

<!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//EN" 
"http : //www . w3 . org/TR/xhtmll/ DTD/xhtml 1- transitional . dtd"> 

<html xmlns="http : / /www . w3 . org/ 1 9 9 9 /xhtml" style="height : 10 0%; "> 
<head runat="server"> 

<title>SilverlightApplication2</ title> 
</head> 

<body style="height : 100%;margin : 0 ; "> 

<form id="forml" runat="server " style="height : 100%; "> 
<asp : ScriptManager ID="ScriptManagerl " 

runat=" server "></asp : ScriptManager> 
<div style="height : 100%; "> 

<asp : Silverlight ID="Xamll" runat=" server " 
Source="~/ClientBin/SilverlightApplication2 . xap" 
MinimumVersion="2. 0.31005.0" Width="100%" Height="100%" /> 
</div> 
</ f orm> 
</body> 
</html> 

Resultat : 



& SilverlightApplication2 - Windows Internet Explorer 



Fig. 4.12 : 

Resultat de notre 
application 
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4.4 Interaction de Silverlight avec la page 

Silverlight et le code C# derriere permettent d'interagir avec les elements de la page 
HTML (aussi appele DOM). 

Avant d'entamer cette partie, lisez I'annexe 2, Introduction au C#. 

Dans le code attache, vous pouvez ainsi rechercher un element dans la page et interagir 
avec celui-ci ou meme ajouter des evenements sur ce bouton : 

using System; 

using System. Collections. Generic; 

using System. Linq; 

using System. Net; 

using System. Windows ; 

using System. Windows . Controls ; 

using System. Windows . Documents ; 

using System. Windows . Input; 

using System. Windows . Media; 

using System. Windows .Media . Animation; 

using System. Windows . Shapes ; 

using System. Windows .Browser; 

namespace SilverlightApplication2 
{ 

public partial class Page : UserControl 
{ 

public Page ( ) 
{ 

InitializeComponent ( ) ; 



HtmlElement button = 

HtmlPage . Document . GetElementByld ( "HTMLButtonA" ) ; 

if (button != null) 

button . AttachEvent ( "onclick" , 

new EventHandler<HtmlEventArgs> ( 

delegate (object o, HtmlEventArgs e) { 
Ht ml ButtonC licked ( "A" ) ; 

}) ) ; 



button = 

HtmlPage . Document . GetElementByld ( "HTMLButtonB" ) ; 

if (button != null) 

button .AttachEvent ( "onclick" , 

new EventHandler<HtmlEventArgs> ( 

delegate (object o, HtmlEventArgs e) { 
HtmlButtonClicked ( "B" ) ; 
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} ) ) ; 

button = 

HtmlPage . Document . GetElementByld ( "HTMLButtonC" ) ; 
if (button != null) 

button . AttachEvent ("onclick", 

new EventHandler<HtmlEventArgs> ( 

delegate (obj ect o, HtmlEventArgs e) 






{ 

HtmlButtonClicked ( "C") ; 

}) ) ; 






} 

private void HtmlButtonClicked ( string which) 


} 


} 


{ 

HTMLMessage.Text = "HTML Button " + which + " Clicked"; 

} 



On attache trois evenements a trois boutons de la page et on affiche quel bouton a ete 
clique par la suite. 

C# permet d' avoir des interactions bien plus fortes entre le DOM et Silverlight, mais il 
s'agit de concepts avances qui ne seront pas abordes dans ce livre. 

Pour plus d' informations, rendez-vous sur le site de MSDN (voir Annexe 3, 
Webographie). 

4.5 Check-list 

Nous avons etudie dans ce chapitre : 

>/ l'ensemble des controles ASP.NET ; 

le controle media pour jouer des videos Silverlight ; 

le controle Silverlight pour mieux integrer vos applications dans ASP.NET. 
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Dans ce chapitre, nous allons approfondir les 
connaissances acquises au chapitre 2, Le langoge 
XAML. Ce chapitre traitera principalement de I'interaction 
humain-machine. 

Cette interaction peut etre simplifiee : 

pour le developpeur d'une part, grace au 
DataBinding a deux sens, aux Styles et 
ControlTemplates et aux UserControls ; 

pour I'utilisateur de I'autre, grace d une amelioration 
considerable de la qualite de I'interface. 
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5.1 Le DataBinding en details 

Jusqu'a present, nous avons utilise le DataBinding ann d'afficher des informations pour 
l'utilisateur. Cependant, le DataBinding permet aussi de demander a ce dernier des 
informations. 

En effet, une fois liee a l'interface et pour peu que l'interface presente des elements 
d'entrees utilisateur, une donnee peut etre modifiee par l'utilisateur sans que le 
developpeur n'ait a ecrire la moindre ligne de code dans le code de la logique applicative. 

L'exemple que nous allons developper ensemble va permettre a l'utilisateur de gerer une 
liste de films et de leur attribuer une appreciation en nombre d'etoiles. 

Tout d'abord, il faut defmir les objets Films. Un Film est un objet represente par son 
Titre, son Realisateur et son Appreciation : 

Film.cs 

using System; 

using System. Net; 

using System. Windows ; 

using System. Windows . Controls ; 

using System. Windows . Documents ; 

using System. Windows . Ink; 

using System. Windows . Input; 

using System. Windows . Media; 

using System. Windows .Media . Animation; 

using System. Windows . Shapes ; 

namespace Filmotheque 
{ 

public class Film 
{ 

private string titre; 
public string Titre 
{ 

get { return titre; } 
set { titre = value; } 

} 

private string realisateur; 
public string Realisateur 
{ 

get { return realisateur; } 
set { realisateur = value; } 

} 
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private int nombreDEtoiles; 
public int NombreDEtoiles 
{ 

get { return nombreDEtoiles; } 
set { nombreDEtoiles = value; } 

} 

public Film() 

{ 

} 

} 

} 

Au cours de ce chapitre, nous aurons aussi besoin d'une collection de films sur laquelle 
travailler. Prenons les devants et declarons-la : 

$^jt Collection de films 

using System; 

using System. Net; 

using System. Windows ; 

using System. Windows . Controls ; 

using System. Windows . Documents; 

using System. Windows . Ink; 

using System. Windows . Input; 

using System. Windows . Media ; 

using System. Windows .Media .Animation; 

using System. Windows . Shapes ; 

using System. Collections. Generic; 

namespace Filmotheque 
{ 

public static class CollectionDeFilms 
{ 

public static List<Film> Films = 
new List<Film>() 
{ 

new Film() { Titre="Retour vers le Present 7", 
Realisateur="Takis Ergopoulos " , 
NombreDEtoiles=5 } , 
new Film() { Titre="Il faut sauver le magicien d'Oz", 
Realisateur="Orhan Benekhol", 
NombreDEtoiles=l } , 
new Film() { Titre="La guerre des Chtis", 
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Realisateur="Gautier Lebeaugros" , 






NombreDEtoiles=4 } , 






new Film() { Titre="2009 l'odisee des Interfaces", 






Real isateur=" Ilka y Nemetzakis" , 






NombreDEtoiles=3 } , 






new Film() { Titre="Silverlight 2 Ze Movie", 






Real isateur=" Salvador Bargelot " , 


} 


} 


NombreDEtoiles=4 } , 

}; 



DataContext 

L'attribut DataContext est present dans chaque element d'interface Silverlight. C'est 
1' unite de ce qu'est la multitude ItemSource d'une ListBox. 

Ainsi, lorsque vous "bindez" 1'ItemSource d'une ListBox a une liste d'objets, par 
exemple une liste de films, chaque item genere comme enfant de cette ListBox par le 
DataBinding possedera un DataContext reference du Film ayant servi de source a sa 
generation. 

Pour simplifier, si nous lions par DataBinding la CollectionDeFilms a une ListBox : 

Une ListBox (XAML) 

<UserControl x: Class="Filmotheque . Page" 
(...)> 

<Grid x : Name="LayoutRoot " Background="White"> 
<ListBox Name="UneListBox"/> 

</Grid> 
</UserControl> 



<fc Une ListBox (C#) 

(using . . . ) 

namespace Filmotheque 
{ 

public partial class Page : UserControl 
{ 

public Page ( ) 
{ 

InitializeComponent ( ) ; 

UneListBox . ItemsSource = CollectionDeFilms . Films ; 
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Filmotheque.Film 



Filmotheque.Film 



Filmotheque.Film 
Filmotheque.Film 
Filmotheque.Film 



Fig. 5.1 : 

Une ListBox liee a la Collection de films 



Chaque element Filmotheque.Film de la ListBox contient un DataContext pointant vers 
le film qu'il represente. 

Dans le code de la logique applicative, il est alors possible de recuperer ce film a partir 
de 1' element XAML. 

Qui plus est, un DataContext pent etre rempli par le developpeur sur d'autres elements 
qu'un element auto-genere par DataBinding. 

Par exemple, avec cette interface : 

Interface recevant un DataContext code en dure (Xaml) 

<UserControl x: Class="Filmotheque . Page" 

xmlns="http : / / schema s . microsoft . com/ win fx/ 2006/xaml/presentation" 
xmlns : x="http : // schema s .microsoft. com/winf x/200 6 /xaml " 
Width="400" Height="300"> 

<StackPanel x : Name="LayoutRoot " Background="White"> 
<StackPanel Orientation="Horizontal" Margin="4"> 
<TextBlock Text="Titre : " Margin="5"/> 
<TextBlock Text=" {Binding Path=Titre}" Margin="5"/> 
</StackPanel> 

<StackPanel Orientation="Horizontal" Margin="4"> 
<TextBlock Text="Realisateur : " Margin="5"/> 
<TextBlock Text=" {Binding Path=Realisateur } " Margin="5"/> 

</StackPanel> 

<StackPanel Orientation="Horizontal" Margin="4"> 
<TextBlock Text="Etoiles : " Margin="5"/> 

<TextBlock Text=" {Binding Path=NombreDEtoiles } " Margin="5"/> 
</StackPanel> 
</StackPanel> 
</ User Con trol> 
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La ligne de code LayoutRoot.DataContext = Col 1 ectionDeFi lms. Fi lms [0] ; donnera le 
resultat suivant : 



Titre: Retour vers le Present 7 
Realisateur: Takis Ergopoulos 
Etoiles: 5 



Fig. 5.2 : 

Interface recevant un DataContext en dur 



C'est exactement le meme procede qui est utilise par la plateforme lorsqu'elle genere les 
items d'une ListBox a partir de DataTempl ate. Pour chaque objet present dans la 
collection de donnees en ItemSource, la plateforme ajoute aux enfants de la ListBox une 
copie du DataTempl ate dont le DataContext est l'objet courant. 



Interaction avec I'utilisateur 

Comme il est ecrit dans 1' introduction de ce chapitre, le DataBinding ne sert pas 
seulement a afficher des donnees mais aussi a les modifier. 

Si nous ajoutons a l'interface precedente quelques TextBoxs liees par binding aux memes 
proprietes du film, et pour peu que la declaration du binding le permettre, le fait de 
modifier le texte contenu dans une TextBox changera directement les donnees en memoire 
vive. 

Pour permettre ce tour de magie, il faut specifier a la declaration du binding son attribut 
Mode. 

Le Mode peut soit etre : 

OneWay ; ce Mode est destine uniquement a l'affichage de donnees. 

TwoWay ; ce Mode sert aussi bien a l'affichage et a la modification de donnees. 

Le code XAML est-il le seul code a modifier pour ajouter cette fonctionnalite ? On 
aimerait bien mais en fait, si modifier uniquement le code XAML permet d' ajouter cette 
fonctionnalite, malheureusement, les modifications apportees aux donnees ne seront pas 
propagees a nouveau vers l'interface lors d'une modification. Dans un cas tel que celui-ci 
avec des elements d'affichage de donnees, l'interface ne sera pas mise a jour. 

Cela etant, ce cas reste isole. Usuellement, il est inutile d' afficher des donnees dans deux 
elements d'interface differents. Quoi que... 

Pour pallier ce probleme, il faut attraper un evenement tel que LostFocus dans le code de 
la logique applicative et forcer la mise a jour du DataContext. 



sis 



Le DataBinding en details 5 



C'est ce que fait le code suivant : 



fl^jt DataBinding Modes + Mise d jour forcee (XAML) 

<UserControl x: Class="Filmotheque . Page" 

xmlns="http : / / schemas .microsoft . com/winf x/2006/xaml/presentation" 
xmlns : x="http : / / schemas . microsoft . com/winf x/ 200 6/xaml " 
Width="400" Height="300"> 

<StackPanel x : Name="LayoutRoot " Background="White"> 
<StackPanel Orientation="Horizontal" Margin="4"> 
<TextBlock Text="Titre : " Margin="5"/> 
<TextBlock Text=" {Binding Path=Titre}" Margin="5"/> 
<TextBox Text=" {Binding Path=Titre, Mode=OneWay } " Margin="5" 
LostFocus="Input_LostFocus" /> 

</StackPanel> 

<StackPanel Orientation="Horizontal" Margin="4"> 
<TextBlock Text="Realisateur : " Margin="5"/> 
<TextBlock Text=" {Binding Path=Realisateur } " Margin="5"/> 
<TextBox Text="{ Binding Path=Realisateur , Mode=TwoWay } " 
Margin="5" 

LostFocus="Input_LostFocus" /> 

</StackPanel> 

<StackPanel Orientation="Horizontal" Margin="4"> 
<TextBlock Text="Etoiles : " Margin="5"/> 

<TextBlock Text=" {Binding Path=NombreDEtoiles } " Margin="5"/> 
<Slider Value=" { Binding Path=NombreDEtoiles, Mode=TwoWay } " 
Minimum="0" Maximum="5" 
Width="100" Margin="5" 
LostFocus=" Input_LostFocus " /> 
</StackPanel> 
</StackPanel> 
</UserControl> 



DataBinding Modes + Mise a jour forcee (C#) 

using (...); 

namespace Filmotheque 
{ 

public partial class Page : UserControl 
{ 

private bool islntialized = false; 

public Page ( ) 
{ 

InitializeComponent () ; 
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islntialized = true; 

LayoutRoot . DataContext = CollectionDeFilms . Films [ 0 ] ; 

} 

private void Input LostFocus (object sender, RoutedEventArgs e) 
{ 

ResetDataContext ( ) ; 

} 

private void ResetDataContext () 
{ 

if (! islntialized) return; 
LayoutRoot . DataContext = null ; 

LayoutRoot . DataContext = CollectionDeFilms . Films [0] ; 

} 

} 

} 

5.2 Les Styles et ControlTemplates 
Style 

Lors de la creation d'une interface XAML, de nombreux attributs vous aident a configurer 
l'affichage des differents elements d'interface. 

Qu'il s'agisse des attributs Background, Foreground, StorkeThi ckness, Fill ou d'autres 
attributs, ils se retrouvent spontanement dans chacun de vos elements d'interface. 

Dans le but d'obtenir une interface coherente, vous serez amene a copier ces elements dits 
de style d'un controle utilisateur a 1' autre. 

Pour eviter une proliferation ingerable de code similaire a travers votre application, 
l'utilisation de styles s'impose. Un style est un ensemble d'attributs predefinis applicables 
a un type d'element pour en configurer le visuel. 

Considerons un code lourd tel que celui-ci : 
Code lourd 

<UserControl x: Class="Filmotheque . Page" 

xmlns="http : / / schemas .microsoft . com/winf x/2006/xaml/presentation" 
xmlns : x="http : / / schemas .microsoft . com/ winfx/2006/ xaml" 
Width="100" Height="80"> 

<StackPanel x : Name="LayoutRoot" Background="White"> 

<TextBlock Foreground="Black" FontSize="15" FontFamily="Arial " 
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FontWeight="Bold" Ho rizontalAlignment=" Center" 




Text="TextBlockl"/> 


<TextBlock 


Foreground="Black" FontSize="15" FontFamily="Arial " 




Fon tWeight— "Bold" Hor i zontalAlignment— "Center" 




Text="TextBlock2"/> 


<TextBlock 


Foreground="Black" FontSize="15" FontFamily="Arial " 




FontWeight="Bold" Ho rizontalAlignment=" Center" 




Text="TextBlock3"/> 


<TextBlock 


Foreground="Black" FontSize="15" FontFamily="Arial " 




FontWeight="Bold" Ho rizontalAlignment=" Center" 




Text="TextBlock4"/> 


</StackPanel> 




</ User Con trol> 





Rempla9ons la repetition d'attributs de style par un element Style unique : 



Code allege par Style 

<UserControl x: Class="Filmotheque . Page" 

xmlns="http : / / schemas .microsoft . com/winf x/2006/xaml/presentation" 
xmlns : x="http : / / schemas . microsoft . com/ winfx/200 6/ xaml " 
Width="100" Height="80"> 

<StackPanel x : Name="LayoutRoot " Background="White"> 
<StackPanel .Resources> 

<Style x: Key="BoldTextBlockStyle" TargetType="TextBlock"> 
<Setter Proper ty=" Foreground" Value="Black"/> 
<Setter Property="FontSize" Value="15"/> 
<Setter Proper ty=" Fon tFamily" Value="Arial"/> 
<Setter Proper ty=" Fon tWeight" Value="Bold"/> 
<Setter Proper ty=" Horizon talAlignment" Value="Center" /> 
</Style> 
</StackPanel.Resources> 

<TextBlock Style=" {StaticResource BoldTextBlockStyle} " 

Text="TextBlockl"/> 
<TextBlock Style=" {StaticResource BoldTextBlockStyle}" 

Text="TextBlock2"/> 
<TextBlock Style=" {StaticResource BoldTextBlockStyle}" 

Text="TextBlock3"/> 
<TextBlock Style=" {StaticResource BoldTextBlockStyle}" 

Text="TextBlock4"/> 

</StackPanel> 
</UserControl> 
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Le code devient bien plus lisible et on peut en assurer facilement la maintenance. Changer 
globalement l'aspect des TextBlock du Style Bol dTextBl ock se fait en une modification au 
lieu de quatre. 

Le resultat, quant a lui, reste le meme : 



TextBlockl 
TextBlock2 
TextBlock3 
TextBlock4 



Fig. 5.3 : 

TextBlock avec Style 



Un style possede comme attributs une x:Key le representant et un TargetType. Le 
TargetType est le type d'element XAML auquel le style peut etre applique. Laisser vide 
cette derniere propriete vous permettra d'appliquer ce style a n'importe quel element 
XAML. En contrepartie, il est dangereux de s'y resoudre par simplicite vu que certains 
attributs (tels que Foreground) ne sont pas partages par tous les elements XAML. 

Les elements enfants des styles sont les setters. Un setter configure l'attribut du nom de 
Property avec la valeur Value. 



ControlTem plate 

Un Control Tempi ate est une sorte de style qui, au lieu de configurer certains attributs 
d'un element d'interface, remplace completement son affichage par un arbre XAML : 



Exemple de ControlTemplate 

<UserControl x: Class="Filmotheque . Page" 

xmlns="http : / / schemas .microsoft . com/winf x/2006/xaml/presentation" 
xmlns : x="http : / / schemas .microsoft . com/ winfx/2006/ xaml" 
Width="150" Height="150"> 

<StackPanel x : Name="LayoutRoot" Background="White"> 
<StackPanel . Resources> 

<Style x:Key="BoldTextBlockStyle" TargetType="TextBlock"> 
<Setter Property="Foreground" Value="Black"/> 
<Setter Property="FontSize" Value="15"/> 
<Setter Property="FontFamily " Value="Arial" /> 
<Setter Property="FontWeight" Value="Bold"/> 
<Setter Property="HorizontalAlignment" Value="Center"/> 
</Style> 



<ControlTemplate x :Key="ActionControlTemplate" 
Targe tType= " Button " > 
<Border Background^" Silver" 



222 



Les Styles et ControlTemplates 



BorderThickness=" 2 " 
BorderBrush="Blue" 
CornerRadius=" 0,0,15,0" 
Margin="5"> 

<StackPanel Orientation=" Vertical" Margin="5"> 
<TextBlock 

Style=" {StaticResource BoldTextBlockStyle} " 
Text=" {TemplateBinding Content} " 
Horizon talAlignment="Lef t"/> 
<Button Click=" {TemplateBinding Click} "> 
<TextBlock 

Style=" {StaticResource BoldTextBlockStyle} " 
Horizon talAlignment=" Right" 
Text="Do it!"/> 
</Button> 
</StackPanel> 
</Border> 
</ControlTemplate> 
</ StackPanel . Resources> 



<Button Template=" {StaticResource ActionControlTemplate} " 

Content="Une Action"/> 



<Button Template=" {StaticResource ActionControlTemplate}" 

Content="Autre Action"/> 
</StackPanel> 
</ User Con trol> 



Une Action 
Do it! 



Fig. 5.4 : 

Exemple de ControlTempbte 



Autre Action 
Do it! 



Etrangement, assigner un Control Tempi ate a un element XAML ne se fait pas par 
l'attribut Control Tempi ate mais via l'attribut Template. 

A l'interieur meme du Control Tempi ate, un nouveau type de binding montre son nez : le 
Tempi ateBi ndi ng. 

Un TemplateBinding permet a un Control Tempi ate de recuperer la valeur d'un des 
attributs de l'element qu'il utilise. 
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Ainsi en ecrivant Text=" {Tempi ateBi ndi ng Content}", nous allons rechercher le Content 
des deux boutons qui utilisent ActionControl Tempi ate. 

Ceci est dangereux. En effet, nous avons assigne par Tempi ateBi ndi ng a l'attribut Text 
d'une TextBox une valeur qui peut ne pas etre du texte. Rappelons-nous qu'un Button peut 
contenir n'importe quel autre element XAML, ce qui n'est pas le cas de l'attribut Text, qui 
lui, accepte uniquement du texte. 

Pour pallier ce risque, il est preferable d'utiliser un ContentPresenter.Un 
ContentPresenter est un element XAML qui possede la capacite d'afficher son contenu. 

Modifions le code du Control Tempi ate : 

ControlTemplate avec ContentTemplate 

<UserControl x: Class="Filmotheque . Page" 
(...) 

<Control Template x : Key="ActionControlTemplate" 
TargetType="Button"> 
<Border Background="Silver " 
BorderThickness="2" 
BorderBrush="Blue" 
CornerRadius = "0, 0, 15, 0" 
Margin="5"> 
<StackPanel Or ientation=" Vertical" 
Margin="5"> 
<ContentPresenter 

Content=" {TemplateBinding Content} " 
Hor i z on talAl ignmen t= " Le f t " / > 
<Button Click=" {TemplateBinding Click} "> 
<TextBlock 

Style=" {StaticResource BoldTextBlockStyle } " 
Hor i z on talAl ignmen t=" Right" 
Text="Do it!"/> 
</Button> 
</StackPanel> 
</Border> 
</ ControlTemplate> 
</StackPanel . Resources> 

<Button Template=" { StaticResource ActionControlTemplate } " 
Content="Une Action"/> 

<Button Template=" { StaticResource ActionControlTemplate } "> 
<StackPanel> 
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<TextBlock 
<TextBlock 
</StackPanel> 

</Button> 
</StackPanel> 
</ User Con trol> 



Text="Ecrire un livre"/> 
Text="Publier un livre"/> 



Une Action 

Do it! 



Ecrire un livre 




Publier un livre 




Do it! 


I 



Fig. 5.5 : 

ControlTem plate avec ContentTem plate 



Dans ce nouvel exemple, que le contenu du bouton soit un simple texte ou un arbre 
XAML complexe, le resultat est le meme. 

5.3 Creer un UserControl 

Toutes ces configurations nous conduisent vers le concept d' UserControl. Un 
UserControl, ou controle utilisateur en francais, est un element d'interface XAML defini 
par le developpeur. 

II est ecrit a l'aide d'un fichier XAML separe du corps de l'application mais aussi d'un 
fichier de code applicatif personnel. 

En effet, un controle utilisateur n'est plus seulement un element de configuration visuelle, 
mais aussi un element englobant une part de logique interne. 

Pour creer un UserControl, il faut : 

ajouter ses codes XAML et C# a la solution Silverlight ; 
definir 1' interface XAML ; 
ecrire la logique applicative. 

Pour utiliser un UserControl, il faut : 

Si le UserControl est defini dans une autre assembly, s'assurer qu'elle a ete compilee 

pour Silverlight et en ajouter la reference au projet Silverlight. 

Ajouter a l'application l'espace de noms (namespace) contenant 1' UserControl. 
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UserControl ClickMe 

Pour apprehender facilement ce concept de controle utilisateur, nous allons en ecrire un 
basique. Cet UserControl contiendra un bouton et changera le contenu de ce bouton 
lorsqu'on cliquera dessus. 

Voici l'interface de ClickMe : 

ClickMe. xaml 

<User Control x : Class="Filmotheque . ClickMe" 

xmlns="http : / / schemas .microsoft . com/winf x/2006/xaml/presentation" 
xmlns : x="http : / / schemas .microsoft . com/ winfx/2006/ xaml"> 
<Grid x : Name="LayoutRoot " Background="White"> 
<Button Name="ClickMeButton" 
Content="Click Me!" 
Click="Button_Click"/> 

</Grid> 
</UserControl> 

Voici le code de la logique applicative : 

ClickMe. cs 

using System; 

using System. Collections. Generic; 

using System. Linq; 

using System. Net; 

using System. Windows ; 

using System. Windows . Controls ; 

using System. Windows . Documents; 

using System. Windows . Input; 

using System. Windows . Media; 

using System. Windows .Media . Animation; 

using System. Windows . Shapes ; 

namespace Filmotheque 
{ 

public partial class ClickMe : UserControl 
{ 

public ClickMe () 
{ 

InitializeComponent ( ) ; 

} 

private void Button_Click (object sender, RoutedEventArgs e) 
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{ 


ClickMeButton . Content = "Merci"; 






} 






} 






} 









Utilisation de 1'UserControl ClickMe : 



Utilisation du UserControle ClickMe 

<UserControl x: Class="Filmotheque . Page" 

xmlns="http : //schemas . microsoft . com/ win fx/ 2006/ xaml /presentation" 
xmlns : x="http : / / schemas . microsoft . com/winf x/200 6 /xaml " 
xmlns :MyApp="clr-namespace: Filmotheque" 
Width="150" Height="150"> 

<StackPanel x : Name="LayoutRoot " Background="White"> 
<MyApp: ClickMe Margin="5"/> 
<MyApp: ClickMe Margin="5"/> 
<MyApp: ClickMe Margin="5"/> 
<MyApp: ClickMe Margin="5"/> 
</StackPanel> 
</UserControl> 



Click Me! 



► Fig. 5.6 : 

UserControle ClickMe sous differents etats 



UserControl Ranking 

Dans l'optique de l'application de gestion de films, un UserControl permettant d'attribuer 
un nombre d'etoiles a un film de maniere visuel peut avoir son importance. 

Le resultat final auquel nous aimerions arriver est le suivant : 

Fig. 5.7: 

Ranking UserControl 
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II doit etre possible d'ecrire le code suivant : 



fl^j Objectif code XAML Ranking UserControl 



<UserControl x: Class="Filmotheque . Page" 

xmlns="http : / / schemas .microsoft . com/winfx/2006/xaml/presentation" 
xmlns : x="http : / / schemas .microsoft . com/winf x/2 00 6/xaml" 
xmlns :MyApp="clr-namespace : Filmotheque" 
Width="400" Height="300"> 

<StackPanel x : Name="LayoutRoot" Background="White"> 
<MyApp : Ranking NombreDEtoile=" 3 " /> 
<MyApp : Ranking 

NombreDEtoile=" {Binding Path=NomberDEtoile , Mode=TwoWay } "/> 

</StackPanel> 
</ User Con trol> 

Un point reste a voir avant d'arriver a ce resultat : Comment ajouter a un UserControl une 
propriete pouvant servir d'attributs dans le code XAML. 



Une DependencyProperty est une propriete declaree dans le code applicatif d'un 
UserControl grace a la methode Register de la classe DependencyProperty. 

C'est une propriete qui au lieu d'etre enregistree dans une variable privee du code 
applicatif, est enregistree par le Framework lui-meme d'une maniere qui importe peu. 

Quoi qu'il en soit, seuls les DependencyProperti es sont stables lorsque vous desirez 
utiliser un attribut dans le code XAML. 

L' utilisation d'une propriete publique du code applicatif dans ce but peut avoir des effets 
malencontreux et imprevisibles. 

L'emploi d'une DependencyProperty a la place d'une propriete publique active la gestion 
des Animations, des Styles, des Templates et du binding sur cette propriete. 

Declaration d'une DependencyProperty : 

public int MyProperty 

{ 

get { return (int) GetValue (MyPropertyProperty) ; } 
set { SetValue (MyPropertyProperty, value) ; } 

} 
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Declaration d'une DependencyProperty 

public static readonly DependencyProperty MyPropertyProperty = 
DependencyProperty . Register ( "MyProperty " , 

typeof (int) , 
typeof (ownerclass) , 
new Proper tyMetadata (0) ) ; 

La fonction DependencyProperty. Regi ster demande 4parametres : 

le nom de la propriete ; 
son type ; 

le type de sa classe mere, la classe qui ote cette DependencyProperty (generalement 
la classe dans laquelle cette propriete est declaree) ; 
I une instance de la classe PropertyMetadata specifiant la valeur initiale de la 
propriete. 

Dans ce cas, nous declarons done : 

une propriete du nom MyProperty ; 
de type nombre entier (int) ; 
dont la classe note est ownercl ass ; 
de valeur initiale 0. 

Creation de I'UserControl Ranking 

Rappel du cahier des charges : Creer un UserControl affichant de 1 a 5 etoiles selon une 
propriete NombreDEtoi 1 es. 

Pour ce faire, nous allons creer deux controles utilisateur : 

Le premier du nom de Star etant une etoile unique, capable de varier de couleur 
(jaune ou gris) quand on clique dessus ou lors de l'appel d'une de ses fonctions 
publiques. 

Le deuxieme du nom de Ranking sera un conteneur de cinq UserControl Star, 
coordonnant leurs travaux. 

Star 

Pour creer 1' UserControl Star, nous allons partir d'une CheckBox. En effet, comme nous 
l'avons vu au chapitre 2, Le langage XAML, une CheckBox possede un attribut IsChecked 
a deux etats. Cet attribut nous sera utile pour savoir si l'etoile est jaune (IsChecked=True) 
ou si l'etoile est grise (IsChecked=Fal se). 
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Nous allons ensuite en redefinir le ControlTemplate pour lui donner l'apparence d'une 
etoile. 

Dans le code suivant, vous decouvrirez l'utilisation de l'element geometrique Path. Cet 
element prend comme valeur de l'attribut Data une serie de points representes par des 
coordonnees geometriques. 

L'attribut Fill de ce Path est lie par Tempi ateBi ndi ng au Background de la CheckBox. 

C'est en faisant varier ce Background de Yel lowStarBrush a GreyStarBrush dans le code 
applicatif que nous changerons le visuel de 1' etoile : 



Star.xaml 



<UserControl x: Class="Filmotheque . Star" 


xmlns 


="http : / / schemas .microsoft . com/winf x/2006/xaml/presentation" 


xmlns 


: x="http : / / schemas .microsoft . com/winf x/2 00 6/ xaml"> 


<Grid 


x : Name="LayoutRoot " Background="Transparent"> 


<Grid . Resources> 




<SolidColorBrush x : Key="YellowStarBrush" Color="#FFFF00"/> 




<SolidColorBrush x : Key="GreyStarBrush" Color=" #C0C0C0 " /> 




<Style x: Key="EmptyStarStyle" TargetType="CheckBox"> 




<Setter Property="Height" Value="40"/> 




<Setter Property="Width" Value="40"/> 




<Setter Property="Margin" Value="2"/> 




<Setter Property="Template"> 




<Setter .Value> 




<ControlTemplate x:Name="EmptyStarTemplate"> 




<Canvas> 




<Canvas Canvas . Left="5" 




Canvas .Top="15"> 




<Path Stroke="#000080" 




Fill=" { TemplateBinding Background} " 




MouseLef tButtonDown="Path MouseLef tButtonDown" 




MouseEnter="Path MouseEnter" 




MouseLeave="Path MouseLeave" 




StrokeThickness="3" 




Strokes tar tLineCap=" Round" 




StrokeEndLineCap="Round" 




StrokeLine Join=" Round" 




Data="M 0,0 1 10,0 1 5,-10 




1 5,10 1 10,0 1 -7,10 1 2,10 




1 -10,-5 1 -10,5 1 2,-10 Z"/> 




</ Canvas> 




</ Canvas> 




</ControlTemplate> 
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</Setter .Value> 
</Setter> 
</Style> 
</Grid. Resources> 

<CheckBox Name="Starl" 

I sChecked= " Tr ue " 

Style=" {StaticResource EmptyStarStyle} " 
Background=" {StaticResource YellowStarBrush} "/> 



</Grid> 
</ User Con trol> 



Trois evenements sont utilises dans ce 
ControlTemplate : 



Fig. 5.8 : 

Etoile solitaire 



MouseLeftButtonDown lorsque l'utilisateur cliquera sur l'etoile, son attribut 
IsChecked sera inverse. 

MouseEnter et MouseLeave lorsque la souris de l'utilisateur se trouve au-dessus de 
l'etoile, nous en changerons le Background en Orange. 



Star.cs 

using System; 

using System. Collections. Generic; 

using System. Linq; 

using System. Net; 

using System. Windows ; 

using System. Windows . Controls; 

using System. Windows . Documents ; 

using System. Windows . Input; 

using System. Windows . Media ; 

using System. Windows .Media .Animation; 

using System. Windows . Shapes ; 

namespace Filmotheque 
{ 

public partial class Star : UserControl 
{ 

public event EventHandler OnColorChanged; 

public bool? IsChecked 



{ 



get { return (bool? ) GetValue ( I sCheckedProperty ) ; } 
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set 
{ 

SetValue ( I sCheckedProperty , value) ; 
Starl . IsChecked = value; 
SetBackground ( ) ; 

} 

} 

public static readonly DependencyProperty 

IsCheckedProperty = DependencyProperty . Register ( 

"IsChecked", 
typeof (bool? ) , 
typeof (Star) , 

new Proper tyMetadata ( true )) ; 



public Star ( ) 
{ 

InitializeComponent ( ) ; 
SetBackground ( ) ; 

} 

private void Path_MouseLef tButtonDown (ob j ect sender, 

MouseButtonEventArgs e) 

{ 

Starl . IsChecked = ! Starl . IsChecked; 
SetBackground ( ) ; 
if (OnColorChanged != null) 

OnColorChanged ( this , EventArgs . Empty) ; 

} 

private void SetBackground ( ) 
{ 

if (Starl . IsChecked. HasValue && Starl . IsChecked. Value) 
Starl . Background = (SolidColorBrush) 

LayoutRoot . Resources [ "YellowStarBrush" ] ; 

else 

Star 1 . Background = (SolidColorBrush) 

LayoutRoot . Resources [ "GreyStarBrush" ] ; 

} 

#region MouseOverManagement 
private Brush SolideStateBackground; 

private void Path MouseEnter (object sender, MouseEventArgs e) 
{ 

SolideStateBackground = Starl . Background; 

Starl . Background = new SolidColorBrush (Colors . Orange) ; 
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} 

private void Path_MouseLeave (obj ect sender, MouseEventArgs e) 
{ 

Starl . Background = SolideStateBackground; 

} 

#endregion MouseOverManagement 

} 

} 

Un point est a mettre en evidence dans ce code applicatif : l'evenement OnCol orChanged 
qui previendra 1' UserControl Ranking que l'utilisateur a clique sur l'etoile. 

Ranking 

Interface de 1' UserControl Ranking : 
Ranking. xaml 

<UserControl x: Class="Filmotheque .Ranking" 

xmlns="http : / / schemas .microsoft . com/winf x/2006/xaml/presentation" 
xmlns : x="http : / / schemas . microsoft . com/ winfx/2006/ xaml " 
xmlns :MyApp="clr-namespace : Filmotheque" 
Width="Auto" Height="Auto" Margin="2" > 
<Grid x : Name="LayoutRoot " Background="White"> 

<Border HorizontalAlignment="Center " 
Vert icalAlignment=" Center " 
Background=" White" CornerRadius="5 " 
BorderBrush="#0 00 08 0" BorderThickness="4"> 
<StackPanel Name="RankingPanel" Orientation="Horizontal "> 
<MyApp:Star Name="Starl " /> 
<MyApp:Star Name="Star2 "/> 
<MyApp:Star Name="Star3"/> 
<MyApp:Star Name="Star4 "/> 
<MyApp:Star Name="Star5"/> 
</StackPanel> 
</Border> 
</Grid> 
</UserControl> 

Comme prevu, du cote de l'interface du controle utilisateur Ranking, il s'agit seulement 
d'une collection de controle utilisateur Star. 
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Fig. 5.9: 

Ranking 



On comprend ici l'utilite d'avoir cree un controle utilisateur pour les etoiles ; il est 
devenu tres aise de faire varier le nombre d'etoiles qu'un Ranking possede. Qui plus est, 
pour aller plus loin, il est possible de faire de ce nombre d'etoiles maximal une 
DependencyProperty configurable. 

Le code applicatif de Ranking va devoir rester a l'ecoute des clics de l'utilisateur sur 
chaque etoile et stocker en memoire le nombre d'etoiles qui lui est attribue. 

En effet, lorsque l'utilisateur clique sur l'etoile 3, toutes les etoiles precedentes doivent 
passer a l'etat jaune et inversement, toutes les etoiles suivantes doivent passer a l'etat gris. 

fl^ Ranking. cs 

using System; 

using System. Collections. Generic; 

using System. Linq; 

using System. Net; 

using System. Windows ; 

using System. Windows . Controls ; 

using System. Windows . Documents ; 

using System. Windows . Input; 

using System. Windows . Media; 

using System. Windows .Media . Animation; 

using System. Windows . Shapes ; 

namespace Filmotheque 
{ 

public partial class Ranking : UserControl 
{ 



public int NombreDEtoiles 
{ 

get { return (int) GetValue (NombreDEtoilesProperty) ; } 

set 

{ 



SetValue (NombreDEtoilesProperty, value) ; 
SetRanking (value) ; 



public static readonly DependencyProperty 

NombreDEtoilesProperty = 
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Dependency Property. Register ( "NombreDEtoiles " , 

typeof (int) , 
typeof (Ranking) , 
new PropertyMetadata ( 0 ) ) ; 

public Ranking ( ) 
{ 

InitializeComponent ( ) ; 

foreach(Star star in RankingPanel . Children) 
star . OnColorChanged += 

new EventHandler (star_OnColorChanged) ; 

} 

void star_OnColorChanged (object sender, EventArgs e) 
< 

Star star = (sender as Star) ; 

int Position = int . Parse (star . Name . Replace ( "Star " , "")); 
SetRanking (Position) ; 

} 

public void SetRanking (int NombreDEtoiles) 
{ 

for (int i = 1; i <= 5; i++) 

{ 

Star star = 

(RankingPanel. FindName ("Star" + i) as Star); 
star . IsChecked = (i <= NombreDEtoiles); 

} 

} 

} 

} 



Integration du controle utilisateur Ranking dans une application 
Silverlight 

II suffit de reprendre le code etudie il y a quelque pages dans les specifications de 
1' UserControl Ranki ng et d'y ajouter un DataContext en code applicatif pour verifier qu'il 
fonctionne correctement : 

Objectif code XAML Ranking UserControl 

<UserControl x: Class="Filmotheque . Page" 

xmlns="http : / / schemas .microsoft . com/winf x/2006/xaml/presentation" 
xmlns : x="http : / / schemas . microsoft . com/ winfx/2006/ xaml " 
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xmlns :MyApp="clr-namespace : Filmotheque" 
Width="400" Height="300"> 

<StackPanel x:Name="LayoutRoot" Background="White"> 
<MyApp : Ranking NombreDEtoile=" 3 " /> 
<MyApp : Ranking 

NombreDEtoile=" {Binding Path=NomberDEtoile , Mode=TwoWay } "/> 

</StackPanel> 
</ User Con trol> 



Jfet Code applicatif 



using System; 

using System. Collections. Generic; 

using System. Linq; 

using System. Net; 

using System. Windows ; 

using System. Windows . Controls ; 

using System. Windows . Documents ; 

using System. Windows . Input; 

using System. Windows . Media; 

using System. Windows .Media . Animation; 

using System. Windows . Shapes ; 

namespace Filmotheque 
{ 

public partial class Page : UserControl 
{ 

public Page ( ) 
{ 

InitializeComponent ( ) ; 
LayoutRoot . DataContext = CollectionDeFilms . Films [ 0] 



Le resultat est a la hauteur de nos esperances 



&&&&& 



&&&&& 



ft ft ft ft ft 
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Fig. 5.10: Ranking en action 
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► Fig. 5.1 1 : Ranking en action 

MediaElement 

Dans une optique totalement differente, nous allons maintenant nous pencher sur un 
controle Silverlight des plus puissants : le controle MediaElement. 

Le controle MediaElement permet d'afficher et d'interagir avec une video a l'interieur 
d'une application Silverlight. 

(j) Attribut MediaElement. Source en XAML bug 

Lorsque vous ajoutez un controle MediaElement d votre application Silverlight, n'en configurez pas la 
source a partir du code XAML, vous recevrez dans ce cas une erreur de chargement de la video [Erreur 
4001). Ceci est un bogue ouvert chez Microsoft mais restons calme, ce bogue n'est pas bloquant, il 
suffit de configurer la source des MediaElement d partir du code applicatif. 

Interface d'un exemple d'utilisation du controle MediaElement : 



Exemple de MediaElement 

<UserControl x: Class="Filmotheque . Page" 

xmlns="http : // schema s . microsoft . com/ winfx/2006/ xaml /presentation" 
xmlns : x="http : / / schemas . microsoft . com/ winf x/200 6 /xaml " 
xmlns :MyApp="clr-namespace : Filmotheque" 
Width="430" Height="300"> 

<StackPanel x : Name="LayoutRoot" Background="Black"> 
<StackPanel 

Orientation="Horizontal"> 
<StackPanel HorizontalAlignment="Center " 
VerticalAlignment="Center "> 

<Button Content="Play" Margin="5" 
Click="Play_Click"/> 
<Button Content="Pause" Margin="5" 

Click="Pause_Click"/> 
<Button Content="Stop" Margin="5" 
Click="Stop_Click"/> 
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<TextBlock Foreground="White" 

VerticalAlignment=" Center" 
Margin="5" >Volume</TextBlock> 
<Slider Name="VolumeSlider " 

Ver ticalAlignment=" Center " 
Minimum="0" Maximum="l " 
Value="0.5" Width="70" 

ValueChanged="VolumeSlider_ValueChanged" /> 

<ToggleButton Name="MuteToggleButton" 
Content="Mute" 
Margin="5" IsChecked="False" 
Checked="Mute" 
Unchecked="UnMute"/> 

</StackPanel> 

<Border Background="Black" 
Border Br us h= "WhiteSmoke" 
BorderThickness="3" 
Ho rizontalAlignment=" Center" 
Ver ticalAlignment=" Center" 
Margin="5" 
CornerRadius="5 "> 
<MediaElement Name="myMediaElement" 
Width="320" 
Height="240" 
Margin="5" 
Stretch="Fill" 
AutoPlay="False" 
MediaFailed="MediaElement_MediaFailed"/> 

</Border> 

</StackPanel> 
<Grid> 

<Grid . Column Def initions> 

<ColumnDef inition Width="Auto" /> 
<ColumnDef inition Width="*"/> 
<ColumnDef inition Width="Auto" /> 
</Grid. ColumnDef initions> 
<TextBlock Foreground="White" Margin="5" 
Grid.Column="0" 

Ver ticalAlignment=" Center ">Seek To</TextBlock> 
<Slider Name="TimeLineSlider" Margin="5" 

Minimum="0" 

Grid . Column=" 1 " /> 
<TextBlock Name="TimeLineTextBlock" Grid.Column="2" 
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Text="00 : 00 : 00/00 : 00 : 00" 

For egr ound= " Whi te " Mar gin= " 5 " /> 

</Grid> 
</StackPanel> 
</UserControl> 



Fig. 5.12 : 

Exemple de 
MediaElement 




Dans cette application Silverlight, vous retrouvez un MediaElement et quelques autres 
controles destines a interagir avec lui. 

Les differents controles ajoutes parlent d'eux-memes, le bouton Play sert a demarrer la 
video, le bouton Pause a l'arreter temporairement, etc. 

Le code applicatif, quant a lui, cache quelques subtilites : 



Code applicatif de I'exemple de MediaElement 

using System; 

using System. Collections. Generic; 

using System. Linq; 

using System. Net; 

using System. Windows ; 

using System. Windows . Controls ; 

using System. Windows . Documents ; 

using System. Windows . Input ; 

using System. Windows .Media; 

using System. Windows .Media .Animation; 

using System. Windows . Shapes; 

using System. Windows . Data; 

using System. Threading; 



namespace Filmotheque 
{ 



239 



5 Concepts avarices 



public partial class Page : UserControl 
{ 

public Page ( ) 
{ 

InitializeComponent () ; 
myMediaElement . Source = 

new Uri (@ "media/Lake . wmv" , UriKind. Relative) ; 

} 

private void MediaElement MediaFailed (ob j ect sender, 
ExceptionRoutedEventArgs e) 

{ 
} 

private void Play Click (object sender, RoutedEventArgs e) 

{ 

TimeLineSlider . Maximum = 

myMediaElement . NaturalDuration . TimeSpan . TotalSeconds ; 
TimeLineSlider . Value = 

myMediaElement .Position. TotalSeconds ; 



myMediaElement . Play ( ) ; 

Timer T = new Timer (new TimerCallback (delegate 
{ 

Dispatcher . Beginlnvoke (new Action (delegate 
{ 

TimeLineSlider . SetValue (Slider .ValueProperty , 

myMediaElement . Position . TotalSeconds) ; 

TimeLineTextBlock . Text = 
myMediaElement . Position . Hours + ":" + 
myMediaElement . Position .Minutes + ":" + 
myMediaElement . Position . Seconds + "/" + 

myMediaElement . NaturalDuration . TimeSpan . Hours 
+ " : " + 

myMediaElement . NaturalDuration . TimeSpan . Minutes 
+ " : " + 

myMediaElement . NaturalDuration . TimeSpan . Seconds ; 

})) ; 

})) ; 

T.Change(0, 1000); 

} 
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private void Pause Click (object sender, RoutedEventArgs e) 
myMediaElement . Pause ( ) ; 

srivate void Stop Click (object sender, RoutedEventArgs e) 
myMediaElement . Stop ( ) ; 



private void VolumeSlider ValueChanged (obj ect sender, 

RoutedPropertyChangedEventArgs<double> e ) 

if (VolumeSlider != null && myMediaElement != null) 
myMediaElement . Volume = VolumeSlider .Value; 



private void Mute (object sender, RoutedEventArgs e) 
myMediaElement . I sMuted = true ; 

private void UnMute (object sender, RoutedEventArgs e) 
myMediaElement . IsMuted = false; 



} 

Pour pallier le bogue relatif a l'attribut Source des Medi aEl ement, c'est dans ce code 
applicatif que Ton se doit de l'assigner. 

► Fig. 5.13 : 

Exemple de 
MediaElement en 
fonctionnement 
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Pour faire varier l'attribut Val eur du Silder TimeLineSlider, nous avons utilise un objet de 
la plateforme .Net du nom de Dispatcher. 

Dispatcher 

Dans une application Silverlight, comme dans une application WPF, l'interface est 
propriete d'un unique thread. C'est dans ce thread que s'executent les differents 
evenements. 

Cependant, il est parfois necessaire d'attaquer l'interface a partir d'un autre thread. C'est 
impossible. 

Le Di spatcher est un objet gerant l'ordre d'appel des fonctions du thread de l'interface. 
Tout ce qu'il est possible de faire a partir d'un autre thread est de demander au 
Dispatcher de mettre en queue l'appel d'une fonction. 

Quand le Di spatcher en trouvera le temps, il l'executera. 

Cette demande se fait a partir de la methode Beginlnvoke du Dispatcher : 

Utilisation du Dispatcher 

Thread autre que le thread interface 
{ 

/* interaction code interface impossible */ 
Dispatcher . Beginlnvoke (new Action (delegate 
{ 

/* interaction code interface possible */ 

}) ) ; 

} 

Passer en mode Plein ecran 

Une fonctionnalite toujours appreciee par un utilisateur lorsqu'il regarde une video est la 
possibilite de passer en mode Plein ecran. 

Silverlight permet cette fonctionnalite grace a la propriete bien cachee : App. Current 
. Host. Content. IsFul IScreen. 

Malheureusement dans notre cas, en assignant cette propriete a True, c'est l'integralite de 
1' application Silverlight qui passe en mode Plein ecran, alors que nous voudrions voir 
uniquement la video. 

Pour completer cette fonctionnalite, il faut reorganiser la structure de 1' application. 
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L'objet App. Current. Host. Content contient deux autres proprietes qui vont nous servir : 

Actual Height est la hauteur de l'ecran de l'utilisateur. 
ActuelWith est la largeur de l'ecran de l'utilisateur. 

Cet objet contient aussi un evenement : Ful 1 ScreenChanged sur lequel nous ajouterons 
une methode reorganisant la structure de 1' application. 

Ajout d'un bouton FullScreen a l'interface et modification du code XAML : 

MediaElement FullScreen (Xaml) 

<UserControl x: Class="Filmotheque . Page" 

xmlns="http : / / schema s . microsoft . com/winf x/2006/ xaml /presentation" 
xmlns : x="http : // schema s .microsoft . com/winf x/ 200 6 /xaml " 
xmlns :MyApp="clr-namespace : Filmotheque" 
Width="Auto" Heigh t= "Auto "> 

<StackPanel x : Name="LayoutRoot " Background="Black"> 
<StackPanel 

Orientation="Horizontal"> 
<StackPanel HorizontalAlignment=" Center" 
Name=" But tonS tackPanel" 

VerticalAlignment="Center "> 

<Button Content="Play" Margin="5" Click="Play_Click"/> 
<Button Content="Pause" Margin="5" Click="Pause_Click"/> 
<Button Content="Stop" Margin="5" Click="Stop_Click"/> 
<Button Content="FullScreen" Margin="5" 
Click="FullScreen_Click"/> 

<TextBlock Foreground="White" VerticalAlignment="Center " 

Margin="5" >Volume</TextBlock> 
<Slider Name="VolumeSlider " VerticalAlignment="Center " 
Minimum="0" Maximum="l" Value="0.5" Width="70" 
ValueChanged="VolumeSlider_ValueChanged" /> 

<ToggleButton Name="MuteToggleButton" Content="Mute" 
Margin="5" IsChecked="False" 
Checked="Mute" 
Unchecked="UnMute"/> 

</StackPanel> 

<Border Name="EcranBorder " 
Background= " Black " 
BorderBrush="WhiteSmoke" 
BorderThickness="3" 
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HorizontalAlignment=" Center" 
VerticalAlignment=" Center" 
Margin="5" 
Width="330" 
Height="250" 
CornerRadius=" 5 " > 
<MediaElement Name="myMediaElement" 

Margin="5" 

Stretch="Fill" 

AutoPlay="False" 

MediaFailed="MediaElement_MediaFailed"/> 

</Border> 
</StackPanel> 

<Grid Name="SliderGrid" Width="400" 
HorizontalAlignment="Lef t"> 

</StackPanel> 
</UserControl> 

Lors de l'evenement CI ick du bouton FullScreen, nous allons : 

Assigner les attributs Visible des elements ButtonStackPanel et SliderGrid a 
Col 1 apsed. La valeur Col 1 apsed de cet attribut signifie que les elements ne doivent 
ni etre affiches sur 1' interface, ni occuper la moindre place residuelle dans 1' interface. 
Redimensionner le Border EcranBorder pour qu'il occupe toute la place disponible 
sur l'ecran de l'utilisateur. 

Modification du code applicatif : 
MediaElement FullScreen 

(...) 

public Page ( ) 
{ 

InitializeComponent ( ) ; 

myMediaElement . Source = new Uri ( @ "media/Lake . wmv" , 
UriKind. Relative) ; 

App . Current . Host . Content . FullScreenChanged += 

new EventHandler (Content_FullScreenChanged) ; 

} 

void Content_FullScreenChanged (object sender, EventArgs e) 
{ 

if ( ! App . Current . Host . Content . IsFullScreen) 
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s 



{ 

Buttons tackPanel .Visibility = Visibility .Visible; 
SliderGrid. Visibility = Visibility .Visible ; 
EcranBorder . SetValue (Border . HeightProper ty , 

(double) 250) ; 
EcranBorder . SetValue (Border . WidthProperty , 

(double) 330) ; 

} 

else 
{ 

Buttons tackPanel .Visibility = Visibility. Collapsed; 
SliderGrid. Visibility = Visibility . Collapsed; 
EcranBorder . SetValue (Border . HeightProperty , 

App . Current . Host . Content . ActualHeight - 10); 
EcranBorder . SetValue (Border .WidthProperty , 

App . Current . Host . Content .ActualWidth - 10); 

} 

} 

private void FullScreen_Click (object sender, RoutedEventArgs e) 
{ 

App. Current. Host. Content. IsFullScreen = true; 

} 

Fig. 5.14: 

MediaElement modifie 
pour supporter le 
FullScreen 




00:00:00/00:00:00 
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Fig. 5.15 : MediaElement en mode FullScreen 



5.4 Les controles de la librairie System. Windows. Controls 

En plus des controles utilisateur Silverlight de base, la plateforme .Net permet 1' utilisation 
de 6 controles utilisateur supplementaires. 

Cinq de ces controles sont presents dans la bibliotheque System.Windows. Controls. 

Pour utiliser cette librairie, vous devez l'ajouter en reference dans votre projet 
Silverlight : 

Cliquez du bouton droit sur Reference dans l'Explorateur de solution. 
Selectionnez Taction Ajouter une reference. 
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Explotateur de solutions - Solution 'TestLod . . . - ■ 



Ql £ SI* 



m 



1 Solution 'TestCodePlexUserControls' (2 projets) 
B- TestCodePlexUserControls 
+. jjj Properties 

□ 



Ajouter une reference... 



Aiouter une reference de service.. 



Fig. 5.16 : 

Add Reference 



3 Dans la boite de dialogue Ajouter une reference, selectionnez l'onglet .Net. 

4 Selectionnez System.Windows.Controls. 



Ajouter une reference 



-?]*] 



■NET | Projets | Parcourir | Recent | 



Norn du composant 


I Version 


| Runtime 


Chemin d'acc 


System. Net 


2.0.5.0 


v2. 0.50727 


c:'i, program F 


System .Runtime , Serialization 


2.0.5.0 


v2. 0.50727 


c:\Program F 


System .Runtime , Serialization . Json 


2.0.5.0 


v2. 0.50727 


c:\Program F 


System.ServiceModel 


2.0.5.0 


v2. 0.50727 


c:\Program F 


System. ServiceModel . PollingDuplex 


2.0.5.0 


v2. 0.50727 


c:\Program F 


System.ServiceModel. Syndication 


2.0.5.0 


v2. 0.50727 


c:\Program F 


System , ServiceModel . Web 


2.0.5.0 


v2. 0.50727 


c:\Program F 


System, Windows 


2.0.5.0 


v2. 0.50727 


c:\Program F 


System , Windows , Browser 


2.0.5.0 


v2. 0.50727 


c:\Program F 


System . Windows .Controls. Data 


2.0.5.0 


v2. 0.50727 


c:\Program F 


System .Windows . Design 


2.0.5.0 


v2. 0.50727 


c:\Program F 


System, Xml 


2.0.5.0 


v2. 0.50727 


c:\Program F 


System, Xml, Linq 


2.0.5.0 


v2. 0.50727 


c:\Program F — 


System , Xml , Serialization 


2.0.5.0 


v2. 0.50727 


c:\Program F w 


<"l ' 






"■ ,n "'""'Vj 



Fig. 5.17: 

BoTte de dialogue 
Ajouter une reference 



Cliquez sur OK 



Calendar 

Le premier de ces controles utilisateur est un calendrier : 



Exemple de Calendar 

<UserControl x: Class="TestWindowsControls . Page" 

xmlns="http : / /schema s . microsoft . com/winf x/2006/xaml/presentation" 
xmlns : x="http : / / schema s . microsoft . com/ winfx/2006/ xaml " 
xmlns : c on trols="clr- name space : System . Windows .Controls ; 
assembly=System . Windows .Controls " 
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xmlns : da ta="clr- name space : System. Windows .Controls ; 

a ssembly=System .Windows . Controls . Data" 
Width="Auto" Height="Auto"> 

<Grid x : Name="LayoutRoot " Background="White"> 

<controls : Calendar Name="calendar "/> 
</Grid> 
</ User Con trol> 





septembre 2004 




lu 


ma me je ve sa 


di 


30 


31 1 2 3 4 


5 


6 


7 8 9 11 


12 


13 


14 15 16 17 18 


19 


20 


21 22 23 24 25 


26 


27 


28 29 30 1 2 


3 




5 6 7 8 9 


10 



Fig. 5.18 : 

Exemple de Calendar 



Les attributs permettant de configurer ce calendrier sont : 

DisplayDate specifie la date a afficher par defaut. 
DisplayMode peut prendre les valeurs : 

Decade affiche 10 annees a l'utilisateur. 
Year affiche 12 mois a l'utilisateur. 

Mounth affiche un mois a l'utilisateur sous forme de tableau de jours. 

Di spl ayDateStart et Di spl ayDateEnd permettent d'afficher seulement une certaine 
periode de temps sur le calendrier. 

Par exemple, pour afficher uniquement les 4 jours de chaque cote du 29juillet 1985, il 
faut modifier le code applicatif de 1' application : 



*# 


Exemple 


de Calend 


ar 2 


using 


System 






using 


System 


. Collections. Generic, • 


using 


System 


. Linq; 




using 


System 


.Net; 




using 


System 


. Windows 




using 


System 


. Windows 


Controls ; 


using 


System 


. Windows 


Documents ; 


using 


System 


. Windows 


Input; 


using 


System 


. Windows 


Media; 


using 


System 


. Windows 


Media . Animation; 


using 


System 


. Windows 


Shapes ; 
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using Filmotheque; 

namespace TestWindowsControls 
{ 

public partial class Page : UserControl 
{ 

public Page ( ) 



{ 



InitializeComponent ( ) ; 

DateTime Lundi29 Juillet85 = new DateTime ( 1 985 , 7, 29); 
calendar . DisplayDate = Lundi2 9 Juillet85 ; 
calendar . DisplayDateStart = Lundi2 9 Juillet85 . AddDays ( -4 ) 
calendar . DisplayDateEnd = Lundi2 9 Juillet85 . AddDays ( 4 ) ; 



4 juillet 19S5 

lu ma me je ve 



Fig. 5.19: 

Calendar de 8 jours 



25 26 27 28 
29 30 31 1 2 



DatePicker 

Le DatePicker fonctionne majoritairement de la meme facon que le Calendar. 

II accepte lui aussi les attributs DisplayDate, Di spl ayDateStart et DisplayDateEnd. 
L'attribut Di spl ayMode y est par contre absent. La vue est fixee sur un Di spl ayMode egal 
a Month. 

Le DatePicker est un controle de saisie d' informations, il demande a l'utilisateur de 
choisir une date. 

L'evenement Sel ectedDateChanged est declenche lorsque l'utilisateur a fini sa selection. 
C'est dans l'attribut SelectedDate que le developpeur retrouvera le DateTime choisi : 



J^jt Exemple de DatePicker (Xaml) 



<UserControl x: Class="TestWindowsControls . Page" 

xmlns="http : / / schema s . microsoft . com/ win fx/ 2006/ xaml /presentation" 
xmlns : x="http : / / schemas . microsoft . com/winf x/200 6 /xaml " 
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xmlns : controls="clr-namespace : System . Windows . Controls; 

assembly=System . Windows .Controls " 
xmlns : data="clr-namespace : System. Windows . Controls ; 

a ssembly=Sys tern .Windows . Controls . Data" 
Width="Auto" Height="Auto"> 

<Grid x : Name="LayoutRoot " Background="White"> 
<controls : DatePicker Name="calendar" 

Ho rizontalAlignment=" Center" 
VerticalAlignment=" Center" 
SelectedDateChanged="DatePicker_SelectedDateChanged"/> 

</Grid> 
</ User Con trol> 



juillet 1985 



Fig. 5.20 : 

Exemple de DatePicker 



ma me je ve sa 



25 26 27 28 
29 30 31 1 2 



fl^j Exemple de DatePicker (C#) 



using 


System, 






using 


System 


Collections. Generic ; 


using 


System 


Linq; 




using 


System 


Net; 




using 


System 


Windows 




using 


System 


Windows 


Controls ; 


using 


System 


Windows 


Documents ; 


using 


System 


Windows 


Input; 


using 


System 


Windows 


Media; 


using 


System 


Windows 


Media . Animation 


using 


System 


Windows 


Shapes ; 


using 


Filmotheque; 





namespace TestWindowsControls 
{ 

public partial class Page : UserControl 
{ 

public Page ( ) 
{ 

InitializeComponent ( ) ; 
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DateTime Lundi29 Juillet85 = new DateTime ( 1 985 , 7, 29); 
calendar . DisplayDate = Lundi2 9 Juillet85; 

calendar . DisplayDateStart = Lundi29Juillet85 .AddDays (-4 ) ; 
calendar . DisplayDateEnd = Lundi2 9 Juillet85 . AddDays ( 4 ) ; 



private void DatePicker_SelectedDateChanged (object sender, 
SelectionChangedEventArgs e) 

{ 

if ((sender as DatePicker) . SelectedDate .HasValue) 
DateTime choix = 

(sender as DatePicker) . SelectedDate .Value ; 

} 



GridSplitter 

Un GridSplitter est un controle utilisateur permettant de redimensionner les tailles des 
colonnes et des lignes d'une grille : 



Exemple de GridSplitter 

<UserControl x: Class="TestWindowsControls . Page" 

xmlns="http : //schemas . microsoft . com/ win fx/ 2006/ xaml /presentation" 
xmlns : x="http : / / schemas . microsoft . com/winf x/200 6 /xaml " 
xmlns : c on trols="clr- name space : System . Windows .Controls ; 

a ssembly=Sys tern. Windows .Controls " 
xmlns : data="clr-namespace : System. Windows .Controls ; 

assembly=System. Windows . Controls . Data" 
Width="250" Height="250"> 

<Grid x : Name="LayoutRoot " Background="White"> 
<Grid . ColumnDef initions> 

<ColumnDef inition/> 

<ColumnDef inition/> 
</Grid. ColumnDef initions> 
<Grid . RowDef initions> 

<RowDef inition/> 

<RowDef inition/> 
</Grid. RowDef i nit ion s> 



<Rectangle Grid.Row="0" Grid . Column=" 0 " Fill="Red"/> 

<Rectangle Grid.Row="0" Grid . Column=" 1 " Fill="Black" /> 

<Rectangle Grid.Row="l" Grid . Column=" 0 " Fill="Black" /> 

<Rectangle Grid.Row="l" Grid . Column=" 1 " Fill="Red"/> 
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<controls : GridSplitter Grid . Column="0 " Grid. RowSpan="2 " /> 
</Grid> 
</UserControl> 



Fig. 5.21 : Un GridSplitter en action 

TabControl etTabltem 

Un TabControl est un element de la famille des Layout, il permet done de structurer 
1' interface. 

Ses enfants doivent obligatoirement etre des Tab Item. Chaque Tab Item est alors classe 
dans le TabControl comme on classerait des feuilles dans un range document. 

L'attribut Header des Tabltem permet de preciser le titre. Seul un Tabltem peut etre 
selectionne (done affiche) simultanement. 

Lors d'un clic sur le header d'un Tabltem, ce Tabltem va directement etre selectionne. 

Les evenements Sel ecti onChanged du TabControl et IsSelectedChanged des Tabltems 
permettent toutefois d'agir sur cette fonctionnalite dans le code applicatif : 



Exemple de TabControl 

<UserControl x : Class="TestWindowsControls . Page" 

xmlns="http : // schema s .microsoft . com/winf x/200 6/ xaml/presentation" 
xmlns : x="http : / / schemas .microsoft . com/winf x/2 00 6/xaml" 
xmlns : controls="clr-namespace : System . Windows . Controls; 

assembly=System . Windows . Controls" 
xmlns : data="clr-namespace : System. Windows . Controls ; 

assembly=System. Windows . Controls . Data" 
Width="250" Height="250"> 

<Grid x : Name="LayoutRoot " Background="White"> 
<controls : TabControl Name="MainTabControl"> 
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<controls : Tabltem Header="StartPage"> 

<StackPanel> 

<TextBlock Text="Exemple de TabControl"/> 

</StackPanel> 
</ controls : Tabltem> 

<controls : Tabltem Header="TabItem2 " I s Select ed=" True" > 

<StackPanel> 

<Ellipse Fill="Blue" Height="50" Width="70"/> 

</StackPanel> 
</controls : Tabltem> 

<controls : Tabltem Header="TabItem3"> 



</controls: Tabltem> 
</controls : TabControl> 
</Grid> 
</ User Con trol> 



StartPage Tabltem2 Tabltem3 




StartPage. Tabltem2 Tablten 
Exemple de TabControl 



Fig. 5.22 : Un TabControl en action 

5.5 Le controle DataGrid 

Le DataGrid est le sixieme controle utilisateur supplementaire par rapport aux controles 
de base. II se trouve dans la librairie System.Windows. Controls. Data. 

Dans l'exemple qui suit, nous allons simplement Her un DataGrid a notre collection de 
films. 

Ce DataGrid aura la propriete AutoGeneratedCol umn a True. Cette propriete stipule a la 
plateforme qu'elle doit creer une colonne par propriete des Films : 



Exemple de DataGrid auto genere 

<UserControl x: Class="TestWindowsControls . Page" 

xmlns="http : / /schema s . microsoft . com/winf x/2006/xaml/presentation" 
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xmlns : x="http : / / schemas .microsoft . com/ winfx/2006/ xaml" 
xmlns : controls="clr-namespace : System. Windows . Controls; 
^* a ssembly=Sys tern .Windows .Controls " 
xmlns : data="clr-namespace : System. Windows . Controls ; 

a ssembly=System .Windows .Controls. Data" 
Width="600" Height="200"> 

<Grid x : Name="LayoutRoot " Background="White"> 
<data : DataGrid Name="dataGrid" 

Header sVisibility="All" 
ColumnWidth="150" 
RowHeight="2 0" 
AutoGenerateColumns="True" 
RowBackground= "Beige" 
IsReadOnly="False" 

AlternatingRowBackground= "LemonChif f on"> 

</data : DataGrid> 
</Grid> 
</UserControl> 

Les quelques attributs utilises ici sont : 

HeadersVi si bi 1 ity pouvant prendre les valeurs : 

Al 1 . Tous les headers sont visible. 

Column. Seuls les litres de colonnes sont visibles. 

None. Aucun des headers n'est visible. 

Row. Seul le header de selection de ligne est visible. 

RowBackground et Al ternati ngRowBackground permettent de changer la couleur de 
fond des lignes entre chaque item 

IsReadOnly specifie si les elements de chaque cellule auto generee sont des elements 
d'affichage ou de saisie d' informations : 



Exemple de DataGrid (C#) 

using System; 

using System. Collections. Generic ; 
using System. Linq; 
using System. Net; 
using System. Windows ; 
using System. Windows . Controls ; 
using System. Windows . Documents ; 
using System. Windows . Input; 
using System. Windows .Media; 
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using System. Windows .Media .Animation; 
using System. Windows . Shapes; 
using Filmotheque; 

namespace TestWindowsControls 
{ 

public partial class Page : UserControl 
{ 

public Page ( ) 
{ 

InitializeComponent ( ) ; 

dataGrid . ItemsSource = CollectionDeFilms . Films ; 

} 

} 

} 





Titre 


Realtsateur 


NombreDEtoiles 






Retour vers le Present 7 


Takis Ergopoulos 


5 






II faut sauver le magicien 


Orhan Benekhol 


1 






La guerre des Chtis 


Gautier Legros 


4 






2009 I'odisee des Interfa< 


Ilkay Nemetzakis 


3 






Silvertight 2 Ze Movie 


Salvador Bargelot 


4 





Fig. 5.23 : DataGrid auto generee 



DataGrid non auto genere 

L'auto generation a ses limites. En effet, des que nous aurons des donnees plus complexes 
que des chaines de caracteres, des nombres ou des valeurs booleennes, la methode 
ToString de ces donnees sera affichee, nous donnant le meme probleme qu'un 
DataBinding direct sans DataTempl ates. 

Pour creer manuellement des colonnes dans une DataGrid, la librairie Microsoft.Windows 
.Controls. Data offre 3 UserTemplates : 

DataGridTextColumn. II s'agit du type de colonnes les plus communes. Elles 
utilisent un TextBlock pour afficher des donnees et une TextBox pour les editer. 
DataGridCheckBoxColumn. Ce type de colonne affiche une CheckBox. Comme son 
nom l'indique, l'attribut IsEdi table de la DataGrid mere de cette colonne est lie a 
l'attribut IsEdi table de la CheckBox. 

DataGridTemplateColumn. II s'agit du type de colonne par excellence. II reprend le 
principe de DataTempl ate et il est done totalement versatile. 



255 



5 Concepts avarices 



Utiliser une collection de colonnes 

Avant toutes grandes modifications, essayons de recreer sans AutoGeneratedCol umn le 
meme resultat qu'avec AutoGeneratedCol umn : 

DataGrid avec collection de colonnes 

<UserControl x: Class="TestWindowsControls . Page" 

xmlns="http : / / schemas .microsoft . com/winf x/2006/xaml/presentation" 
xmlns : x="http : / / schemas .microsoft . com/ winfx/2006/ xaml" 
xmlns : controls="clr-namespace : System. Windows . Controls; 

assembly=System. Windows . Controls" 
xmlns : data="clr- name space : System. Windows .Controls ; 

assembly=System. Windows . Controls . Data" 
Width="600" Height="200"> 

<Grid x : Name="LayoutRoot " Background="White"> 
<data : DataGrid Name="dataGrid" 

Header sVisibility="All" 
ColumnWidth="150" 
RowHeight="2 0" 
AutoGenerateColumns=" False" 
RowBackground=" Beige" 
IsReadOnly="False" 

AlternatingRowBackground= "LemonChif f on"> 
<data : DataGrid . Columns> 

<data : DataGridTextColumn Header="Titre" 
Binding=" {Binding Path=Titre}" /> 
<data : DataGridTextColumn Header="Realisateur " 
Binding=" {Binding Path=Realisateur } " /> 
<data: DataGridTextColumn Header="Nombre d'etoiles" 
Binding=" {Binding Path=NombreDEtoiles} " /> 
</data : DataGrid . Columns> 
</data : DataGrid> 
</Grid> 
</ User Con trol> 





Titre 


Realisateur 


Nombre d'etoiles 




Retour vers le Present 7 


Takis Ergopoulos 


5 




II faut sauver le magicien 


Orhan Benekhol 


1 




La guerre des Chtis 


Gautier Legros 


4 




2009 I'odisee des Interfac 


Ilkay Nemetzakis 


3 




SilverLight 2 Ze Movie 


Salvador Bargelot 


4 





Fig. 5.24 : DataGrid avec collection de colonnes 
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Remarquez d'ors et deja la subtile difference dans le titre de la colonne representant le 
nombre d'etoiles. Ayant la main sur le contenu de son Header, il nous a ete possible de 
le faire passer de NombreDEtoi 1 e a Nombre d'etoiles. 

DataGridCheckBoxColumn et DataGridTemplateColumn 

Pour aller plus loin dans les exemples, nous devrons changer de collection de donnees. 
En effet, une collection de donnees contient uniquement des chaines de caracteres et un 
nombre ne suffit pas a exploiter la puissance des DataGridTemplateColumn. 

Le cas d'etude parfait est une liste de projets. 

Un projet est defini par son nom, sa date de depart, sa date butoir, sa liste d'employes. 

Un employe est defini par son nom, son prenom, sa date de naissance, sa photo d'identite, 
son adresse de blog et son email. 

Voici le code des sources de donnees : 
J^jt Projet. cs 

using System; 
using System. Net; 
using System. Windows ; 
using System. Windows . Controls ; 
using System. Windows . Documents ; 
using System. Windows . Ink; 
using System. Windows . Input; 
using System. Windows .Media; 
using System. Windows .Media .Animation; 
using System. Windows . Shapes; 
using System. Collections. Generic- 
namespace TestWindowsControls 
{ 

public class Projet 
{ 

private string nom; 

public string Nom 
{ 

get { return nom; } 
set { nom = value; } 

} 

private DateTime depart; 
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public DateTime Depart 
{ 

get { return depart; } 
set { depart = value; } 

} 

private DateTime buttoir; 

public DateTime Buttoir 
{ 

get { return buttoir; } 
set { buttoir = value; } 

} 

private List<Employe> equipe; 

public List<Employe> Equipe 
{ 

get { return equipe; } 
set { equipe = value; } 

} 

public Proj et ( ) { } 

} 

} 



Employe. cs 



using System; 

using System. Net; 

using System. Windows ; 

using System. Windows . Controls ; 

using System. Windows . Documents; 

using System. Windows . Ink; 

using System. Windows . Input; 

using System. Windows . Media; 

using System. Windows .Media . Animation; 

using System. Windows . Shapes ; 

namespace TestWindowsControls 
{ 

public class Employe 
{ 

private string nom; 
public string Nom 



258 



Le controle DataGrid 5 



{ 

get { return nom; } 
set { nom = value; } 

} 

private string prenom; 

public string Prenom 
{ 

get { return prenom; } 
set { prenom = value; } 

} 

private Uri photo; 

public Uri Photo 
{ 

get { return photo; } 
set { photo = value; } 

} 

private Uri blog; 

public Uri Blog 
{ 

get { return blog; } 
set { blog = value; } 

} 

private string email; 

public string Email 
{ 

get { return email; } 
set { email = value; } 

} 

public Employe () { } 

} 

} 



CollectionDeProjet.es 

using System; 
using System. Net; 
using System. Windows ; 
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using System. Windows . Controls ; 

using System. Windows . Documents; 

using System. Windows . Ink; 

using System. Windows . Input; 

using System. Windows . Media; 

using System. Windows .Media . Animation; 

using System. Windows . Shapes ; 

using System. Collections. Generic ; 



namespace TestWindowsControls 
{ 

public static class CollectionDePro j et 
{ 

public static List<Projet> Projets = new List<Pro j et> ( ) 
{ 

new Pro j et ( ) 
{ 

Nom="OpenApp" , 

Depart=new DateTime (2 00 9, 1 , 12 ) , 
Buttoir=new DateTime ( 20 0 9, 2 , 15 ) , 
Equipe = new List<Employe> ( ) 
{ 

CollectionDePro j et . Simon, 
CollectionDeProjet. Caroline 

} 

}, 



new Pro j et ( ) 
{ 

Nom="Livre SL2 " , 
Depart=new DateTime (2 00 6, 8 , 5 ) , 
Buttoir=new DateTime (2000, 1, 10 ) , 
Equipe = new List<Employe> ( ) 

{ 

CollectionDeProjet.Loic, 
CollectionDeProjet. Simon 

} 

}, 

new Pro j et ( ) 
{ 

Nom= " Jubbeo " , 

Depart=new DateTime (2 00 9, 3 , 6 ) , 
Buttoir=new DateTime (2009, 8, 21 ) , 
Equipe = new List<Employe> ( ) 
{ 

CollectionDeProjet . Florent, 
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CollectionDePro j et . Simon, 
CollectionDePro jet. Loic 

} 

}, 

new Pro j et ( ) 
{ 

Nom= "Wipus " , 

Depart=new DateTime (2 00 6, 7 , 1 ) , 
Buttoir=new DateTime ( 20 0 9 , 4 , 8 ) , 
Equipe = new List<Employe> () 
{ 

CollectionDeProjet. Simon, 
CollectionDePro jet . Loic, 
CollectionDeProjet.X 

} 

} 

}; 

public static Employe Loic = new Employe () 
{ 

Nom = "Loic", 

Prenom = "Bar", 

Email = "loic.bar@wipus.com", 

Photo = new Uri ( "Employe/Loic . jpg" , UriKind. Relative ) , 
Blog = new Uri ( "http : //www . loicbar . com" , UriKind. Absolute) 

}; 

public static Employe Simon = new Employe ( ) 
{ 

Nom = "Simon", 

Prenom = "Boigelot", 

Email = "simon.boigelot@wipus.com", 

Photo = new Uri ( "Employe/Simon . jpg" , UriKind. Relative) , 
Blog = new Uri ( "http : //www . simonboigelot . com" , UriKind. Absolute) 

}; 

public static Employe Florent = new Employe ( ) 
{ 

Nom = "Florent", 
Prenom = "G.", 

Email = "MisterFlo@provider.com", 

Photo = new Uri ( "Employe/Buddy . JPG" , UriKind. Relative) , 
Blog = new Uri ( "http : //fake .MisterFlo . com" , UriKind. Absolute) 

}; 
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public static Employe Caroline = new Employe () 
{ 

Nom = "Caroline", 
Prenom = "L . " , 

Email = "caroline@wipus.com", 

Photo = new Uri ( "Employe/Buddy . JPG" , UriKind. Relative) , 
Blog = new Uri ( "http :/ /fake . KRO . com" , UriKind. Absolute) 

}; 

public static Employe X = new Employe () 
{ 

Nom = "", 

Prenom = "X", 

Email = "x@wipus.com", 

Photo = new Uri ( "Employe/Buddy . JPG" , UriKind. Relative) , 
Blog = new Uri ( "http :/ /fake . X . com" , UriKind. Absolute) 

}; 

} 

} 

En guise d' illustration du probleme du a l'auto generation, voici ce que donnerait une 
DataGrid auto generee dont 1'itemsSource est Col lectionDeProjet.Projets. 



Nom 


Depart 


Buttoir 


Equipe 


OpenApp 


1/12/2009 12:00:00 AM 


2/15/2009 12:00:00 AM 


System. Collections. Gener 


Livre SL2 

Jubbeo 

Wipus 


8/5/2006 12:00:00 AM 
3/6/2009 12:00:00 AM 
7/1/2006 12:00:00 AM 


1/10/2000 12:00:00 AM 
8/21/2009 12:00:00 AM 
4/8/2009 12:00:00 AM 


System. Collections. Gener 
System. Collections. Gener 
System. Collections. Gener 



Fig. 5.25 : Probleme du a AutoGeneratedColumn 



Les dates representees dans cette DataGrid ont un aspect a la limite de l'illisible. Quant 
a la liste d' employes, impossible de savoir ce qu'elle contient. 

Reproduisons d'abord ce resultat : 

<^ Reproduction du resultat auto genere 

<UserControl x: Class="TestWindowsControls . Page" 

xmlns = "http : / / schema s .microsoft . com/ win fx/ 200 6/xaml /presentation" 
xmlns : x="http : / / schemas .microsoft . com/ win fx/ 2 00 6/xaml" 
xmlns : controls="clr-namespace : System . Windows . Controls; 

assembly=System. Windows . Controls" 
xmlns : data="clr-namespace : System. Windows . Controls ; 

assembly=System. Windows . Controls . Data" 
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Width="Auto" Height="Auto"> 




<Grid x : Name="LayoutRoot " Background="White" 


> 


<data : DataGrid Name="dataGrid" 




Header sVisibility="All" 




C o 1 umnWi dt h= " 1 5 0 " 




RowHeight="2 0" 




Au toGener ateColumns= " Fal se 


ii 


RowBackground= "Beige" 




IsReadOnly="False" 




AlternatingRowBackground= 


"LemonChif f on"> 


<data : DataGrid . Columns> 




<data : DataGridTextColumn Header= 


"Nom du Projet" 


Binding=" {Binding Path=Nom} " /> 




<data : DataGridTextColumn Header= 


"Date de debut" 


Binding= " { Binding Path=Depar t } " 


/> 


<data : DataGridTextColumn Header= 


"Date buttoir" 


Binding=" {Binding Path=Buttoir } " 


/> 


<data : DataGridTextColumn Header= 


"Equipe" 


Binding= " { Binding Path=Equipe } " 


/> 


</data : DataGrid . Columns> 




</data : DataGrid> 




</Grid> 




</UserControl> 







Nom du Projet 


Date de debut 


Date buttoire 


Equipe 


OpenApp 


1/12/2009 12:00:00 AM 


2/15/2009 12:00:00 AM 


System. Collections. Gener 


Livre SL2 

Jubbeo 

Wipus 


8/5/2006 12:00:00 AM 
3/6/2009 12:00:00 AM 
7/1/2006 12:00:00 AM 


1/10/2000 12:00:00 AM 
8/21/2009 12:00:00 AM 
4/8/2009 12:00:00 AM 


System. Collections. Gener 
System. Col lections. Gener 
System. Collections. Gener 



Fig. 5.26 : Reproduction du resultatauto genere 



Modification de Vaffichage des dates 

Pour afficher des dates, rien de mieux qu'un DatePicker. 

Nous allons remplacer dans le code XAML de 1' application les deux 
DataGridTextCol umns Date de debut et Date buttoir par des DataGridTempl ateCol umns 
contenant un DatePicker. 

J^jt Exemple de DataGridTemplateColumn DatePicker 

<data :DataGridTemplateColumn Header="Date de debut"> 
<data : DataGridTemplateColumn . CellTemplate> 

<DataTemplate> 

<controls : DatePicker 
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SelectedDate=" {Binding Depart, Mode=OneWay } " /> 

</DataTemplate> 
</data : DataGridTemplateColumn . CellTemplate> 
<data : DataGridTemplateColumn . CellEditingTemplate> 

<DataTemplate> 

<controls : DatePicker 
SelectedDate=" {Binding Depart, Mode=TwoWay } " /> 
</DataTemplate> 
</data : DataGridTemplateColumn . CellEditingTemplate> 
</data : DataGridTemplateColumn> 



Deux attributs de Template sont a redefinir dans cet UserControl, le Cell Tempi ate 
(Tempi ate utilise en mode d'affichage de donnees) et le Cel 1 Edi ti ngTempl ate (Tempi ate 
utilise en mode d' edition des donnees) 

Le remplacement de ces DataTemplate a la sauce DataGrid contribue deja beaucoup a la 
proprete de notre interface : 



Nom du Projet 
OpenApp 
Livre SL2 
Jubbeo 
Wipus 



Date de debut 

12/01/2009 



Date buttoir 

Hfl i 15/02/2009 



I [Ts] 1 10/01/2000 



1/07/2006 



janvier 2000 



Equipe 

[Tsl System. Collections. Gener 
{15] System. Collections. Gener 
em. Collections. Gener 
em. Collections. Gener 



lu ma me je ve 

27 28 29 30 31 



1 



10 11 12 13 14 15 16 

17 18 19 20 21 22 23 

24 25 26 27 28 29 30 

31 1 2 3 4 5 6 



► Fig. 5.27 : DataGrid avec DataGridTemplateColumn DatePicker 

Modification de I'affichage de la liste d 'employes 

Pour ce qui est de la liste d'employes, une bonne facon de s'entrainer a la manipulation 
des DataGrid est d'ecrire DataGrid en tant que redefinition d'une cellule par une autre 
partie de DataGrid. 

Debutons avec l'attribut AutoGeneratedCol umn a True. II est evident qu'il faudra changer 
cela le plus vite possible : 



DataGridTemplateColumn contenant une DataGrid auto generee 

<data : DataGridTemplateColumn Header="Equipe"> 
<data : DataGridTemplateColumn . CellTemplate> 
<DataTemplate> 
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<data : DataGrid AutoGenerateColumns="True" 
ItemsSource=" {Binding Path=Equipe} " 
IsReadOnly="True"> 

< ! --<data : DataGrid. Columns> 
<data : DataGridTextColumn 
Header="Nom" 

Binding=" {Binding Nom}"/> 
</data : DataGrid. Columns>--> 

</data : DataGrid> 
</DataTemplate> 
</data : DataGridTemplateColumn . CellTemplate> 
<data : DataGridTemplateColumn . CellEditingTemplate> 
<DataTemplate> 

<data : DataGrid AutoGenerateColumns="True" 
ItemsSource=" {Binding Path=Equipe} " 
IsReadOnly="False"> 

</data : DataGrid> 
</DataTemplate> 
</ data : DataGridTemplateColumn . CellEditingTemplate> 
</ data : DataGridTemplateColumn> 

Le resultat est deja tres satisfaisant : 





Norn du Projet 


Date de debut 




Date buttoir 




Equipe 

















12/01/2009 




15/02/2009 


1GB 


Norn Prenom Photo 


Blog 


Email 




OpenApp 










Simon 


Boigelot 


Employe/Si mo n.jpg 


http://www.simonboigelot.com simon.boigelot@wipus.com 














Caroline L. 


Employe/Buddy.JPG 


http://fake.KRO.com 


caroline@wipus.com 






5/08/2006 


m 


10/01/2000 


113 


Norn Prenom Photo 


Blog 


Email 






Livre SL2 










LoTc 


Bar 


Employe/Loicjpg 


http : //www. loicbar.com 


loic.bar@wipus.com 
















Simon 


Boigelot 


Employe/Si mo n.jpg 


http://www.simonboigelot.com 


simon.boigelot@wipus.com 








6/03/2009 


m 


21/08/2009 


IBB 


Nom 


Prenom 


Photo 


Blog 


Email 






Jubbeo 










Flo rent 


G. 


Employe/Buddy JPG 


http://fake.Misterflo.com 


MisterFlo@provider.com 














Simon 


Boigelot 


Employe/Simon.jpg 


http://www.stmonboigelot.com 


simon.boigelot@wipus.com 
















LoTc 


Bar 


Employe/Loic.jpg 


http://www.loicbar.com 


loic.bar@wipus.com 








1/07/2006 


m 


8/04/2009 


113 


Nom 


Prenom 


Photo 


Blog 


Email 






Wipus 










Simon 


Boigelot 


Employe/Simon.jpg 


http://www.simonboigelot.com 


simon.boigelot@wipus.com 














LoTc 


Bar 


E m p 1 o ye/Loic.jpg 


http://www.loicbar.com 


loic.bar@wipus.com 
















X 


Employe/Buddy.JPG 


http://fake-X.com 


x@wipus.com 





Fig. 5.28 : DataGridTemplateColumn contenant une DataGrid auto generee 

Pour rendre le tout encore plus beau, nous allons creer pour chaque employe une mini 
carte de visite. 
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C'est maintenant que Ton passe a False la valeur AutoGeneretedCol umn de notre 
DataGrid Equipe, elle-meme DataTemplate d'une DataGridTempl ateCol umn de notre 
DataGrid principale : 



fl^jt Carte de visite pour Employes 

<data : DataGrid AutoGenerateColumns="False" 

ItemsSource=" {Binding Path=Equipe} " 
IsReadOnly="True"> 



<data : DataGrid. Columns> 

<data : DataGridTemplateColumn> 

<data : DataGridTemplateColumn . CellTemplate> 
<DataTemplate> 

<StackPanel Or i en tation=" Horizontal "> 

<Image Source=" {Binding Path=ImageSourcePhoto} " 
Height="50" Width="50" 
Stretch="UniformToFill"/> 
<StackPanel Or ientation=" Vertical "> 

<StackPanel Orientation="Horizontal"> 

<TextBlock Text="{ Binding Path=Prenom} " 

Margin="5"/> 
<TextBlock Text="{ Binding Path=Nom} " 
Margin="5"/> 
</StackPanel> 

<HyperlinkButton Content=" { Binding Blog}"/> 
<HyperlinkButton Content=" { Binding Email} "/> 
</StackPanel> 
</StackPanel> 
</DataTemplate> 
</ data : DataGridTemplateColumn . CellTemplate> 
</ data : DataGridTemplateColumn> 
</ data : DataGrid. Columns> 



</data : DataGrid> 



Nom du Projet Date de debut Date buttoir 

01/2009 15/02/2009 



Boigelot Simon 

ittp:// www. si monboigelct.ee 
Mmort.boigetot@wipus.com 



7k] 10/01/2000 



EH 



L. Caroline 

http7/rake. KRO.com 
Carolines* w 'pus, co m 



w.l oicbar.com 
wpus.com 



► Fig. 5.29 : 

DataGrid completement 
custom isee 
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II a ete necessaire d'ajouter une propriete a la definition de classe Etudiant. 

Cette propriete est ImageSourcePhoto de type ImageSource. En effet, l'attribut Source 
d'une Image est une ImageSource et non un URI : 



Propriete ImageSourcePhoto 



namespace 


TestWindowsControls 


{ 

public 
{ 


class Employe 


(...) 

public ImageSource ImageSourcePhoto 


{ 






get 




{ 




return new Bitmaplmage (Photo) ; 




} 


} 




(. . . 

} 


) 


} 





Listing de l'interface complete de la DataGrid templatisee 



DataGrid Templatisee 

<UserControl x: Class="TestWindowsControls . Page" 

xmlns="http : / /schema s . microsoft . com/winf x/2006/xaml/presentation" 
xmlns : x="http : / / schema s . microsoft . com/ winfx/2006/ xaml " 
xmlns : c on trols="clr- name space : System .Windows .Controls ; 

a ssembly=Sys tern. Windows .Controls " 
xmlns : data="clr-namespace : System. Windows .Controls ; 

assembly=System. Windows . Controls . Data" 
Width="Auto" Height="Auto"> 

<Grid x : Name="LayoutRoot " Background="White"> 
<data : DataGrid Name="dataGrid" 

HeadersVisibility="All" 
AutoGenerateColumns=" False" 
RowBackground= "Beige" 
IsReadOnly="False" 

AlternatingRowBackground= "LemonChif f on"> 
<data : DataGrid . Columns> 

<data : DataGridTextColumn Header="Nom du Projet" 
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Binding=" {Binding Path=Nom}" /> 




<data : DataGridTemplateColumn Header="Date de debut"> 




<data : DataGridTemplateColumn . CellTemplate> 




<DataTemplate> 




<controls : DatePicker VerticalAlignment="Top" 




SelectedDate=" {Binding Depart, Mode=OneWay } " /> 




</DataTemplate> 




</ data : DataGridTemplateColumn . CellTemplate> 




<data : DataGridTemplateColumn . CellEditingTemplate> 




<DataTemplate> 




<controls : DatePicker VerticalAlignment="Top" 




SelectedDate=" {Binding Depart, Mode=TwoWay } " /> 




</DataTemplate> 




</ data : DataGridTemplateColumn . CellEditingTemplate> 




</ data : DataGridTemplateColumn> 




<data : DataGridTemplateColumn Header="Date buttoir"> 




<data : DataGridTemplateColumn . CellTemplate> 




<DataTemplate> 




<controls : DatePicker VerticalAlignment="Top" 




SelectedDate=" {Binding Buttoir, Mode=OneWay } " /> 




</DataTemplate> 




</data : DataGridTemplateColumn . CellTemplate> 




<data : DataGridTemplateColumn . CellEditingTemplate> 




<DataTemplate> 




<controls : DatePicker VerticalAlignment="Top" 




SelectedDate=" {Binding Buttoir, Mode=TwoWay } " /> 




</DataTemplate> 




</data : DataGridTemplateColumn . CellEditingTemplate> 




</data : DataGridTemplateColumn> 




<data: DataGridTemplateColumn Header="Equipe"> 




<data : DataGridTemplateColumn . CellTemplate> 




<DataTemplate> 


<data 


DataGrid Au toGener at eColumns=" False" 




ItemsSource=" { Binding Path=Equipe } " 




IsReadOnly="True"> 


<data 


DataGrid. Columns> 


<data : DataGridTemplateColumn> 




<data : DataGridTemplateColumn . CellTemplate> 




<DataTemplate> 




<StackPanel Or i en tation=" Horizontal "> 




<Image Source=" { Binding Path=ImageSourcePhoto } " 




Height="50" Width="50" 
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Stretch="Unif ormToFill"/> 




<StackPanel Orientation="Vertical"> 




<StackPanel Or i en tat ion=" Horizontal 


"> 


<TextBlock Text="{ Binding Path= 


Prenom } " 


Margin="5"/> 




<TextBlock Text="{ Binding Path= 


Norn} " 


Margin="5"/> 




</StackPanel> 




<HyperlinkButton Content—" {Binding 


Blog} " /> 


<HyperlinkButton Content=" {Binding 


Email} "/> 


</StackPanel> 




</StackPanel> 




</DataTemplate> 




</ data : DataGridTemplateColumn . CellTemplate> 




</ data : DataGridTemplateColumn> 




</ data : DataGrid . Columns> 




</data : DataGrid> 




</DataTemplate> 




</data : DataGridTemplateColumn . CellTemplate> 




</ data : DataGridTemplateColumn> 




</ data : DataGrid. Columns> 




</data : DataGrid> 




</Grid> 




</ User Con trol> 





5.6 Les controles Silverlight Toolkit de CodePlex 

Les derniers controles que ce livre aborde sont les controles fournis par le Silverlight 
ToolKit de CodePlex. 

Ce ToolKit ajoute 12 nouveaux UserControl aux controles utilisateur presents dans la 
version de base de Silverlight. 

Ces 12 controles utilisateur se repartissent en trois categories : 

les controles utilisateur de saisie d' informations ; 
a les controles utilisateur de structuration d' informations ; 
a les controles utilisateur de styles et themes. 

Pour utiliser ces nouveaux controles, il faut prealablement en telecharger la librairie sur 
le site de CodePlex : http://www.codeplex.com/Silverlight/. 

Ensuite, pour ajouter a votre projet Silverlight les differentes DLL en tant que references : 
Cliquez du bouton droit sur Reference dans l'Explorateur de solution. 



569 



5 Concepts avarices 



Selectionnez Taction Ajouter une reference. 



Fig. 5.30 : 

Add Reference 





Ajouter une reference... 




Aputer une reference de service... 





Explorateur de solutions - Solution 'TestCod... » 



Solution 'TestCodePlexUserControls' (2 projets) 
B £3 TestCodePlexUserControls 
S ^ Properties 

ii 



3 Dans la boite de dialogue Ajouter une reference, selectionnez l'onglet Parcourir. 

4 Naviguez jusqu'a 1' emplacement des DLL et selectionnez les fichiers Microsoft 
. Windows. Controls. Theming. dl, Microsoft. Windows. Controls. Data Visualization, dll, 
Microsoft. Windows. Controls.dll et Microsoft. Windows. Controls.Input.dll. 



Ajouter une reference 



JLjxl 



.NET | Projets Parcourir | Recent | 
Look jn: | tD CodePlex 



"3 O * ° 



'i Design 

. j Themes 



jMicr osof t , Windows . Controls . DataVisualization . c 
J Microsoft, Windows. Controls. dll 
J Microsoft .Windows . Controls . Input . dll 
[Microsoft, VVindows. Controls. Theming. dll 



File name: ] "Microsoft. Windows. Controls. Theming. dll" "Microsoft. Windows. Co w \ 



Files of type: I " dll 



3 



► Fig. 5.31 : 

BoTte de dialogue 
Ajouter une reference 



5 Cliquez sur OK. 

Vous trouverez tous les exemples et toutes les informations necessaires a 1' utilisation de 
ces nouveaux UserControls dans le fichier ZIP fourni par CodePlex. 
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5.7 Check-list 

Dans ce chapitre, nous avons ameliore considerablement nos competences en XAML, 
etudie des moyens efficaces pour rendre un code d'interface plus lisible ainsi que d'autres 
moyens, tout aussi efficaces, pour obtenir l'effet inverse. 

Le juste milieu entre un code propre et une experience utilisateur riche ne semble pas 
encore accessible ; seule l'experience pourra vous aider sur cette voie. 

Sachez que rien n'est impossible, en Silverlight, ou presque. Tout ce que vous pouvez 
imaginer, vous pouvez le coder ; la plateforme .Net vous y aidera. 
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Decouvrir 
Deepzoom 



Deepzoom est une technologie introduite dans 
Silverlight 2. C'est un des points forts de Silverlight. En 
effet, Deepzoom permet une gestion optimale des images. 
Nous allons decouvrir dans ce chapitre comment utiliser 
cette technologie hors du commun au travers d'un exemple 
simple mais efficace avec Deepzoom. 



6 Decouvrir Deepzoom 



6.1 Introduction a Deepzoom 

DeepZoom permet d'effectuer un zoom performant sur des images presque arbitrairement 
de grandes tailles dans Silverlight. Les images peuvent etre affichees a une echelle tres 
petite et tres grande sans affecter les performances de l'application qui affiche l'image. La 
seule propriete qui affecte les performances est le nombre de pixels a afficher a l'ecran. 
Mais il existe des cas deja largement diffuses sur Internet qui utilisent des milliards de 
pixels. C'est le cas du hard rock que vous pouvez trouver a cette adresse : http://memorabilia 
.hardrock.com/. 




Fig. 6.1 : Hard rock 



Youtube, Dailymotion et d'autres se sont mis a la haute resolution. Deepzoom est la pour 
que vous puissiez faire de meme avec les images. Souvent, les photos sur le Web sont de 
mauvaise qualite ; on peut tres rarement zoomer correctement sur une image. Vous 
pouvez utiliser deepzoom pour afficher des images de tres grande qualite. Vous pouvez 
ainsi imaginer un site de visualisation d'images haute resolution pour les photos de 
vacances, de mariage ou les photos professionnelles. 

Deepzoom permet egalement une visualisation panoramique d'un paysage ou d'une 
maison. Imaginez cela pour des sites consacres a rimmobilier ! 

Cela permet egalement de nouveaux modeles de publicite. En effet, le zoom peut apporter 
des informations supplementaires sur un produit mis en publicite. 
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6.2 Fonctionnement de Deepzoom 



Deepzoom charge en fait les images en basse resolution et charge les resolutions plus 
grandes au fur et a mesure. C'est pour cette raison que le chargement de l'image est tres 
rapide. Quand on regarde les sondages, ce qui embete le plus un utilisateur est de devoir 
attendre pour le chargement d'une page. Ici on charge les informations de base de 
l'image ; au debut, l'image reste floue mais bien presente. Au fur et a mesure, l'image 
s'eclaircit et avant meme que l'utilisateur n'ait eu le temps de commencer a zoomer, 
l'image est chargee entierement. Ceci permet d'avoir une experience utilisateur unique et 
vraiment satisfaisante. 



L'image haute resolution est en fait decoupee en plusieurs images. Microsoft appelle cela 
la pyramide d'images. Une pyramide d'images decompose une image en fragments de 
256 x 256 d'images JPG ou PNG (dans ce cas, la taille est arbitraire et peut etre modifiee) 
et stocke egalement des versions de resolution inferieure de l'image dans les fragments. 
Chaque fragment est stocke a l'interieur d'un fichier distinct et chaque niveau de la 
pyramide est stocke a l'interieur de dossiers distincts. L'image ci-apres decrit 
schematiquement le fonctionnement de la pyramide d'images. L'image elle-meme est 
disponible en pleine resolution dans le bas de la pyramide (voir l'image ci-apres) et les 
versions de resolution inferieure jusqu'a 4x4 pixels sont stockees avec l'image pleine 
resolution. Les images a chaque niveau de la pyramide sont stockees dans des fragments 
de 256 x 256 pixels (lignes blanches dans les images). DeepZoom peut ainsi extraire 
uniquement les fragments requis pour la taille actuelle de l'image a l'ecran, au lieu de 
telecharger toute l'image. Par exemple, si vous effectuez un zoom avant pour afficher 
uniquement la partie centrale en surbrillance de l'image, DeepZoom charge uniquement 
les fragments en surbrillance, plutot que toute l'image au format 1 024 x 1 024. 

La creation manuelle de ces pyramides peut se reveler fastidieuse. Par consequent, il est 
recommande d'utiliser un outil permettant de convertir les images en une pyramide 
d'images. Par exemple, pour ce faire, vous pouvez utiliser DeepZoom Composer. Vous 
trouverez cet utilitaire sur le site de Silverlight.net. 




Fig. 6.2 : 

Image dans le temps 
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Fig. 6.3 : 

Pyramide d' images 



Le format de fichier qui sert a acceder a la pyramide d'images utilise un schema XML. 
A nouveau, vous pouvez generer ce format de fichier a l'aide de DeepZoom Composer. 
Toutefois, si vous souhaitez exercer un controle plus precis sur le format de fichier, vous 
pouvez creer manueilement le code XML ou apporter des modifications manuelles a un 
fichier genere par un outil. 

Vous pouvez vous-meme creer un les fichiers XML. Mais cela est loin d'etre simple. 
D'abord, il genere un fichier de metadata : 

<?xml ver sion=" 1 . 0 " ?> 
<Metadata version="l"> 

<AspectRatio>0 . 73384 1 6594 1 9 68 9</AspectRatio> 

<Image> 

<FileName>C : \Documents and Settings\samlan\Desktop\Labs\ 

Deep Z oomCol lec ti on s\ Deep ZoomOutput\DeepZoomComposer\ source 
images\tree blossoms . jpg</FileName> 

<x>0</x> 

<y>0</y> 

<Width>0 . 42 971592 6819635</Width> 
<Height>0 . 47 3933 64 92 8 91</Height> 
<ZOrder>l</ ZOrder> 
<Tag /> 
</ Image> 
<Image> 

<FileName>C : \Documents and 

Set tings \ s amlan\ Desk top \ Labs \ Deep ZoomCol lection s\ 

DeepZ oomOutput\ Deep ZoomComposer \ source 

image s\guy_by_the_beach . j pg</FileName> 
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<x>0 . 55 9910 53434 81 7</x> 
<y>0</y> 

<Width>0 . 44008946565183</Width> 

<Height>0 . 4 73933 64 92 8 91</Height> 

<Z0rder>2</ Z0rder> 

<Tag /> 
</ Image> 
<Image> 

<FileName>C : \Documents and Settings\samlan\Desktop\Labs\ 

Deep ZoomCol le ct i on s \ Deep ZoomOutputX Deep ZoomComposer \ source 
images\licorice . jpg</FileName> 

<x>0</x> 

<y>0. 52 60 66350 710 9</y> 

<Width>0 . 431362 68578 44 7 6</Width> 

<Height>0 . 4 73933 64 92 8 91</Height> 

<ZOrder>3</ ZOrder> 

<Tag /> 
</ Image> 
<Image> 

<FileName>C : \Documents and Settings\samlan\Desktop\Labs\ 

Deep ZoomCol lections \ Deep ZoomOutputADeepZoomComposer \ source 
images\f lower . jpg</FileName> 

<x>0 .5795 52 83983294 6</x> 

<y>0. 52 60 6635071 09</y> 

<Width>0 . 42 044 71601670 53</Width> 

<Height>0 . 4 73933 64 92 8 91</Height> 

<ZOrder>4</ ZOrder> 

<Tag /> 
</ Image> 
</Metadata> 

Ainsi qu'un deuxieme fichier presque identique mais avec un ratio : 

<?xml version=" 1 . 0 " ?> 
<SceneGraph version="l"> 

<AspectRatio>0 . 73384 1 65941 9 68 9</AspectRatio> 

<SceneNode> 

<FileName>C : \Documents and Settings\samlan\Desktop\Labs\ 

DeepZoomCol lections \ Deep ZoomOutput\DeepZoomComposer\ source 
images\tree blossoms . jpg</FileName> 

<x>0</x> 

<y>0</y> 

<Width>0 . 42 971592 6819635</Width> 

<Height>0 . 4 73933 64 92 8 91</Height> 

<ZOrder>l</ ZOrder> 
</SceneNode> 
<SceneNode> 
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<FileName>C : \Documents and Settings\samlan\Desktop\Labs\ 

Deep Z oomCol lec ti on s\ Deep ZoomOutput\DeepZoomComposer\ source 
images\guy by the beach . j pg</FileName> 

<x>0 . 55 991053434 81 7<7x> 

<y>0</y> 

<Width>0 . 440 08 94 65 65183</Width> 

<Height>0 . 47 3933 64 92 8 91</Height> 

<ZOrder>2</ ZOrder> 
</SceneNode> 
<SceneNode> 

<FileName>C : \Documents and Settings\samlan\Desktop\Labs\ 

Deep Z oomCol lec t i on s\ Deep ZoomOutput\ Deep ZoomComposer \ source 
images\licorice . jpg</FileName> 

<x>0</x> 

<y>0. 52 60 6635071 09</y> 

<Width>0 . 431 362 68578 447 6</Width> 

<Height>0 . 47 3933 64 92 8 91</Height> 

<ZOrder>3</ ZOrder> 
</SceneNode> 
<SceneNode> 

<FileName>C : \Documents and Settings\samlan\Desktop\Labs\ 

Deep Z oomCol lec t i on s\ Deep ZoomOutput\ Deep ZoomComposer \ source 
images\ flower . jpg</FileName> 

<x>0 .5795 52 83983294 6</x> 

<y>0. 52 60 66350 7109</y> 

<Width>0 . 420 44 7160167053</Width> 

<Height>0 . 47 3933 64 92 8 91</Height> 

<ZOrder>4</ ZOrder> 
</SceneNode> 
</SceneGraph> 

II genere enfin un fichier contenant des informations sur les images et des references vers 
les metadata de chacune des images : 

<?xml version="l . 0" encoding="UTF-8 " ?> 

Collection MaxLevel="8" TileSize="256" Format="png" Nextltemld="4" 
xmlns = "http : / / schema s . microsoft . com/ deep zoom/ 2 0 08 "> 
<Items> 

<I ld="0" N="0" IsPath="l" 

Source="dzc output images/tree blossoms . xml "> 
<Size Width="515" Height="774" /> 
<Viewport Width="2 . 3271 18 64 " X="0" Y="0" /> 
</I> 

<I Id="l" N="l" IsPath="l" 

Source="dzc output images/guy by the beach. xml"> 
<Size Width="569" Height="835" /> 

<Viewport Width="2 . 2 722 652 " X="-l . 2 722 652 " Y="0" /> 
</I> 
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<I Id="2" N="2" lsPath="l" 


Source="dzc output images/licorice . xml "> 


<Size Width="531" Height= 


"795" /> 


<Viewport Width="2 . 318235 


" X="0" Y="-l . 66186452" /> 


</I> 




<I ld="3" N="3" IsPath="l" 


Source="dzc output images/flower . xml "> 


<Size Width="541" Height= 


"831" /> 


<Viewport Width="2 . 378 42 " 


X="-l . 37842011" Y="-l . 70500922" /> 


</I> 




</ Items> 




</Collection> 





Ce fichier reference par exemple les informations sur flower : 



<?xml version=" 1 . 0 " encoding="UTF- 


8"?> 


<Image TileSize="256" Overlap="l" 


Format="png" 


xmlns="http : / / schema s . microsoft . 


com/ deep zoom/ 2 008 "> 


<Size Width="541" Height="831"/> 




</ Image> 





Vous voyez egalement une serie de dossiers : 1, 2, 3, 4, etc. Ces dossiers contiennent une 
ou plusieurs images. Elles represented l'element de plus en plus grand. 

6.3 Deepzoom par I'exemple 

Pour bien comprendre Deepzoom, il faut l'utiliser. Voici en image 1' application Silverlight 
que nous allons creer : 

Pour commencer, il faut defmir le XAML pour cette application. Si on regarde 
attentivement, on remarque seulement deux elements pertinents : 

une zone pour les images ; 
un bouton. 

La zone pour les images est un peu particuliere ; c'est une zone specifique a Deepzoom 
que vous n'avez probablement jamais rencontree auparavant. C'est un objet XAML 
MultiScal elmage : 

<MultiScaleImage Height="600" x:Name="msi" 

Source="GeneratedImages/dzc_output . xml " Width=" 80 0 "/> 
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Cette zone fait reference au fichier XML que nous avons vu precedemment et qui 
ressemble a ceci : 

<?xml version="l . 0" encoding="UTF-8 " ?> 

Collection MaxLevel="8" TileSize="256" Format="png" Nextltemld="4" 
xmlns = "http : / / schema s . microsoft . com/ deep zoom/20 08 "> 
<Items> 

<I ld="0" N="0" IsPath="l" 

Source="dzc output images/tree blossoms . xml "> 
<Size Width="515" Height="774" /> 
<Viewport Width="2 . 3271 18 64 " X="0" Y="0" /> 
</I> 

Une fois que vous avez assimile le nouvel element XAML, le code n'est pas tres 
complique : 

<UserControl x: Class="DeepZoomProject . Page" 

xmlns = "http : / / schema s .microsoft . com/ win f x/2 00 6 /xaml/ present at ion" 
xmlns : x="http : / / schemas .microsoft . com/ win f x/2 00 6/ xaml" 
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Width="800" Height="600"> 

<Grid x :Name="LayoutRoot" Background="White"> 

<Border BorderBrush="#FF727272" BorderThickness="l, 1, 1, 1"> 
<MultiScaleImage Height="600" x:Name="msi" 

Source="GeneratedImages/dzc output. xml" Width="800"/> 
</Border> 

<Button Height="31" Width="28 6" Content="Randomize Images" 
Click="Arrange_Click"/> 
</Grid> 
</ User Con trol> 

Sur notre MultiScalelmage, nous allons declarer une serie d'evenements qui nous 
permettront de savoir ce que fait l'utilisateur sur l'application (clic, deplacement, etc.). 
Ceci se fera dans le constructeur de notre page (dans le code behind, code attache) : 

msi .MouseMove += delegate (object sender, MouseEventArgs e) 
{ 

if (mouseButtonPressed) 
{ 

mouselsDragging = true; 

} 

this . lastMousePos = e . GetPosition (this . msi ) ; 

}; 

msi .MouseLef tButtonDown += delegate (obj ect sender, MouseButtonEventArgs e) 
{ 

mouseButtonPressed = true; 
mouselsDragging = false; 
dragOffset = e . GetPosition (this ) ; 
currentPosition = msi . ViewportOrigin; 

}; 

msi .MouseLeave += delegate (obj ect sender, MouseEventArgs e) 
{ 

mouselsDragging = false; 

}; 

msi .MouseLef tButtonUp += delegate (obj ect sender, MouseButtonEventArgs e) 
{ 

mouseButtonPressed = false; 
if (mouselsDragging == false) 
{ 

bool shiftDown = (Keyboard. Modifiers & ModifierKeys . Shift) == 
ModifierKeys . Shift; 

ZoomFactor = 2.0; 

if (shiftDown) ZoomFactor = 0.5; 
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Zoom (ZoomFactor, this . lastMousePos ) ; 

} 

mouselsDragging = false; 

}; 

msi . MouseMove += delegate (object sender, MouseEventArgs e) 
{ 

if (mouselsDragging) 
{ 

Point newOrigin = new Point (); 

newOrigin.X = currentPosition . X - ( ( (e . GetPosition (msi ) . X - 
dragOf f set . X) / msi . ActualWidth) * msi .ViewportWidth) ; 

newOrigin. Y = currentPosition . Y - (( (e . GetPosition (msi) . Y - 
dragOf f set . Y) / msi .ActualHeight) * msi .ViewportWidth) ; 

msi . ViewportOrigin = newOrigin; 

} 

}; 

On voit apparaitre l'utilisation d'une fonction Zoom, fonction que Ton utilise pour 
atteindre un point : 

public void Zoom (double zoom, Point pointToZoom) 
{ 

Point logicalPoint = this .msi . ElementToLogicalPoint (pointToZoom) ; 
this . msi . ZoomAboutLogicalPoint ( zoom, logicalPoint . X, logicalPoint . Y) ; 

} 

Tout ce code ne prend malheureusement pas en compte la molette de la souris qui est 
pourtant tres utilisee. Pour cela, nous pouvons creer une classe qui prendra en compte 
cette molette. Cette classe a ete definie au depart par Pete Bois et adaptee au projet. Vous 
trouverez le code de cette classe a la fin du chapitre. 

Vous pouvez vous attacher aux evenements de la molette de la maniere suivante : 



new MouseWheelHelper (msi ) 


Moved += delegate (obj ect sender, 


^» MouseWheelEventArgs e) 




{ 

e. Handled = true; 




if (e. Delta > 0) 




ZoomFactor = 1.2; 




else 




ZoomFactor = .80; 




Zoom ( ZoomFactor , this 


lastMousePos) ; 


}; 
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Dans notre programme, il faut juste gerer correctement le clic sur le bouton au milieu de 
notre application Silverlight. Pour cela, une fonction intercepte l'evenement click de 
notre bouton : 

private void Arrange_Click (ob j ect sender, RoutedEventArgs e) 
{ 

ArrangelntoGrid ( ) ; 

} 

Cette fonction va rearranger les images. Nous devons creer une animation. Vous avez vu 
dans un chapitre precedent ce qu'etait les storyboards. Nous allons ici creer un storyboard 
de facon dynamique, c'est-a-dire directement dans le code : 

Storyboard moveStoryboard = new Storyboard () ; 

Ensuite, il faut creer 1' animation et les frames qui vont intervenir dedans : 

/ / Create Animation 

PointAnimationUsingKeyFrames moveAnimation = new 
PointAnimationUsingKeyFrames () ; 

/ / Create Keyframe 

SplinePointKeyFrame startKeyf rame = new SplinePointKeyFrame () ; 
startKeyf rame .Value = currentPosition ; 

startKeyf rame . KeyTime = KeyTime . FromTimeSpan (TimeSpan . Zero) ; 

startKeyf rame = new SplinePointKeyFrame () ; 
startKeyf rame .Value = f uturePosition; 

startKeyf rame . KeyTime = KeyTime . FromTimeSpan (TimeSpan . FromSeconds ( 1 ) ) ; 

KeySpline ks = new KeySpline (); 

ks . ControlPointl = new Point(0, 1) ; 

ks . ControlPoint2 = new Point (1, 1 ) ; 

startKeyf rame . KeySpline = ks; 

moveAnimation .KeyFrames .Add (startKeyframe) ; 

Storyboard. SetTarget (moveAnimation, currentlmage) ; 
Storyboard. SetTargetProperty (moveAnimation, new 
PropertyPath ( "ViewportOrigin" ) ) ; 

moveStoryboard. Children .Add (moveAnimation) ; 
msi . Resources .Add ( "unique id", moveStoryboard); 

// Play Storyboard 
moveStoryboard. Begin ( ) ; 
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La seule chose a faire auparavant est de reorganiser les images. Pour cela, nous disposons 
d'une liste d'images qui est renvoyee par notre fonction. Cette liste determine l'ordre : 

private List<MultiScaleSubImage> RandomizedListOf Images ( ) 
{ 

List<MultiScaleSubImage> imageList = new 

List<MultiScaleSubImage> ( ) ; 
Random ranNum = new Random () ; 

// Store List of Images 

foreach (MultiScaleSublmage sublmage in msi . Sublmages ) 
{ 

imageList .Add (sublmage) ; 

} 

int numlmages = imageList . Count; 

// Randomize Image List 

for (int i = 0 ; i < numlmages; i++) 

{ 

MultiScaleSublmage templmage = imageList [i] ; 
imageList . RemoveAt (i ) ; 

int ranNumSelect = ranNum . Next ( imageList . Count) ; 
imageList . Insert (ranNumSelect, templmage) ; 

} 

return imageList; 

} 

Dans la fonction ArrangelntoGri d, nous recuperons tout au debut ces images : 

List<MultiScaleSubImage> randomList = RandomizedListOf Images () ; 

Ensuite, on effectue une boucle sur le nombre de colonnes de notre application (3) et sur 
le nombre d'images par colonne (nombre d'images/nombre de colonnes - 1 ) . 

Ce sont les seules choses dont vous avez besoin pour creer cette application utilisant 
Deepzoom. Vous pourrez retrouver l'exemple complet dans le code livre avec le livre sur 
le site de Micro Application. 
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MouseWheelHelper.es 



using System; 

using System. Net; 

using System. Windows ; 

using System. Windows . Controls ; 

using System. Windows . Documents; 

using System. Windows . Ink; 

using System. Windows . Input; 

using System. Windows .Media; 

using System. Windows .Media .Animation; 

using System. Windows . Shapes ; 

using System. Windows .Browser ; 

namespace DeepZoomPro j ect 
{ 

/ / Courtesy of Pete Blois 

public class MouseWheelEventArgs : EventArgs 
{ 

private double delta; 
private bool handled = false; 

public MouseWheelEventArgs (double delta) 
{ 

this. delta = delta; 

} 

public double Delta 
{ 

get { return this. delta; } 

} 

// Use handled to prevent the default browser behavior! 

public bool Handled 

{ 

get { return this . handled; } 
set { this. handled = value; } 

} 

} 

public class MouseWheelHelper 



public event EventHandler<MouseWheelEventArgs> Moved; 
private static Worker worker; 
private bool isMouseOver = false; 
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public MouseWheelHelper (FrameworkElement element) 
{ 

if (MouseWheelHelper . worker == null) 

MouseWheelHelper . worker = new Worker (); 

MouseWheelHelper . worker . Moved += this . HandleMouseWheel 

element .MouseEnter += this . HandleMouseEnter ; 
element .MouseLeave += this . HandleMouseLeave ; 
element .MouseMove += this .HandleMouseMove; 

} 

private void HandleMouseWheel (obj ect sender, 
MouseWheelEventArgs args) 

{ 

if (this . isMouseOver) 

this .Moved (this, args); 

} 

private void HandleMouseEnter (object sender, EventArgs e) 
{ 

this . isMouseOver = true; 

} 

private void HandleMouseLeave (object sender, EventArgs e) 
{ 

this . isMouseOver = false; 

} 

private void HandleMouseMove (obj ect sender, EventArgs e) 
{ 

this . isMouseOver = true; 

} 

private class Worker 
{ 

public event EventHandler<MouseWheelEventArgs> Moved; 

public Worker () 
{ 

if (HtmlPage. IsEnabled) 
{ 

HtmlPage .Window. AttachEvent ( "DOMMouseScroll " , 
this . HandleMouseWheel) ; 
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Html Page . Window. At tachE vent ( "onmousewheel" , 

this . HandleMouseWheel ) ; 
HtmlPage . Document . AttachEvent ( "onmousewheel " , 

this . HandleMouseWheel) ; 

} 

} 

private void HandleMouseWheel (object sender, 
HtmlEventArgs args) 

{ 

double delta = 0 ; 

ScriptObject eventObj = args . EventObj ect; 

if (eventObj .GetProperty ( "wheelDelta" ) != null) 
{ 

delta = 

( (double) eventObj .GetProperty ("wheelDelta") ) 
/ 12 0; 



if (HtmlPage . Window . GetProperty ( "opera" ) != 
null) 
delta = -delta; 

} 

else if (eventObj . GetProperty ( "detail " ) != null) 
{ 

delta = 

-( (double) eventObj .GetProperty ("detail") ) / 
3; 



if 

(HtmlPage . Browser Information . User Agent . IndexOf 
("Macintosh") != -1) 
delta = delta * 3; 



if (delta != 0 && this. Moved != null) 
{ 

MouseWheelEventArgs wheelArgs = n 

MouseWheelEventArgs (delta) ; 
this .Moved (this, wheelArgs); 



if (wheelArgs . Handled) 

args . PreventDef ault ( ) ; 
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} 

} 

La partie la plus importante est la partie ou nous allons attacher les evenements : 

public Worker () 
{ 

if (HtmlPage. IsEnabled) 
{ 

HtmlPage . Window . AttachEvent ( " DOMMouseScroll " , 

this . HandleMouseWheel) ; 
HtmlPage .Window .AttachEvent ( "onmousewheel " , 

this . HandleMouseWheel ) ; 
HtmlPage . Document .AttachEvent ( "onmousewheel", 

this . HandleMouseWheel) ; 

} 

} 



6.4 Deepzoom et Virtual Earth 

Virtual Earth est le Google Map de Microsoft. II est dans un sens meilleur que Google 
Map au niveau du nombre de vues qu'il propose par defaut. Son plus gros defaut est 
d'etre payant pour une utilisation poussee. 

Si on reflechit au fonctionnement d'un utilitaire de map, on se rend vite compte qu'au 
final, ce n'est qu'une serie d'images mises les unes a cote des autres et les unes au-dessus 
des autres. On arrive bien a imaginer que cela fonctionne un peu comme Deepzoom ou 
qu'il est tres facile d'utiliser Deepzoom avec la structure d'images existantes. 

Vous pouvez decouvrir un projet qui permet d'integrer Virtual Earth dans Deepzoom. 

Retrouvez ce projet a l'adresse suivante : http://www.codeplex.com/deepearth. 
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6.5 Check-list 

Dans ce chapitre sur Deepzoom, nous avons etudie : 
l'element XAML MultiScalelmage ; 

la manipulation des images dans Deepzoom a l'aide de Deepzoom Composer. 
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7. 1 Silverlight et les langages dynamiques 

Silverlight supporte les langages dynamiques. Dans ces langages, on retrouve Python et 
Ruby que vous connaissez peut-etre. On peut facilement imaginer que d'autres langages 
viendront s'ajouter a cette liste, comme PHP. 

Le support de ces langages dynamiques permet une meilleure prise en main de Silverlight, 
qui s'appuie alors sur des langages bien plus largement utilises. 

Dans cette annexe, nous verrons comment employer Silverlight avec Python et Ruby, 
renommes pour 1' occasion IronPython et IronRuby. 

Silverlight et IronPyhton 

II faut savoir que la DLR, outil indispensable pour utiliser les langages dynamiques, est 
encore en developpement. Tous les tests que vous pouvez actuellement effectuer se font 
sur un composant en developpement. 

La DLR et les langages dynamiques ont ete confies a la communaute (en grande partie). 
C'est done une demarche de Microsoft vers 1'OpenSource. Cela amene de nombreux 
avantages mais aussi certains inconvenients. 

Ces langages ne sont pas encore bien integres a Visual Studio. Comme vous allez le voir, 
nous devrons repasser en ligne de commandes pour creer notre projet IronPython. Cela 
devrait etre regie peu de temps apres la parution de ce livre dans le courant de 2009. 

En attendant, vous devez vous procurer le SDK de developpement. Ce SDK peut etre 
trouve sur le site de Silverlight.NET. Une fois installe, vous pouvez ouvrir votre utilitaire 
de commande et vous rendre dans le dossier script du fichier telecharge. 

Pour creer un projet, il faut ensuite utiliser cette ligne de commandes : 

> script/sl [ruby | python | j script] <application_name> 

Par exemple : 

> script/ si python testPythonApp 

De cette maniere, un projet est genere dans un dossier testPyhtonApp. A l'interieur, vous 
trouvez quelques fichiers dont un index et deux dossiers. Dans les deux dossiers, vous 
avez un fichier de style ainsi que deux fichiers composant 1' application Silverlight : un 
fichier XAML et un fichier Python. Vous pouvez les ouvrir avec Visual Studio : 

<UserControl x: Class="System. Windows . Controls . UserControl" 
xmlns="http : // schema s .microsoft . com/ client/ 20 07" 
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xmlns : x="http : / / schema s .microsoft. com/ winfx/2006/ xaml "> 

<Grid x : Name="layout root" Background="White"> 
<TextBlock x:Name="Message" FontSize="30" /> 
</Grid> 

</UserControl> 

Ainsi que le fichier Python : 

from System . Windows import Application 

from System. Windows . Controls import UserControl 

class App : 

def init (self): 

root = Application . Current . LoadRootVisual (UserControl () , "app. xaml") 
root . Message . Text = "Welcome to Python and Silverlight!" 

App() 

Pour generer ensuite un fichier xap, vous avez besoin d'un petit utilitaire appele Chiron. 
Vous pouvez trouver cet utilitaire dans le package que vous avez telecharge (SDK de la 
DLR). Cet utilitaire s' utilise de la maniere suivante : 

Chiron.exe /directory : MyApp\app /zipdlr : app . xap 

Nous vous conseillons de deplacer le contenu du fichier bin dans le repertoire ou vous 
voulez creer votre fichier xap. 

Apres avoir obtenu ce fichier, vous avez toutes les cartes en main pour creer correctement 
une application Silverlight avec des langages dynamiques. 

Une horloge en IronPython et Silverlight 

Nous allons creer un simple exemple en IronPython. Nous ne reviendrons pas dans cette 
partie sur la creation et la compilation du projet. 

Cette application est vraiment simple et composee de deux fichiers : app.xaml et app.py. 

Une horloge est animee, il faut done declarer, comme vous l'avez vu au chapitre 2, Le 
langage XAML, une serie de triggers et de storyboards : 

<Canvas . Triggers> 

<EventTrigger RoutedEvent="Canvas . Loaded"> 
<EventTrigger . Actions> 
<BeginStoryboard> 
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<Storyboard> 




<DoubleAnimation 


x : Name=" hour Animation" 




Storyboard . TargetName="hourHandTransf orm" 




Storyboard . TargetProperty=" Angle" 




From="180" To="540" 




Duration="12 : 0 : 0" 




RepeatBehavior= " Forever " /> 


<DoubleAnimation 


x : Name="minuteAnimation" 




Storyboard . TargetName="minuteHandTransf orm" 




Storyboard . TargetProperty=" Angle" From="l 80 " 




To="540" Duration="l : 0 : 0" 




RepeatBehavior= " Forever " /> 


<DoubleAnimation 


x : Name="secondAnimation" 




Storyboard . TargetName="secondHandTransf orm" 




Storyboard . TargetProperty=" Angle" From="l 80 " 




To="540" Duration="0 : 1 : 0" 




RepeatBehavior= " Forever " /> 


<DoubleAnimation 


Storyboard . TargetName="parentCanvas" 




Storyboard . TargetProperty= "Opacity" 




From="0" To="0.7" Duration="0 : 0 : 4"/> 


</Storyboard> 




</BeginStoryboard> 




</ Event Trigger . Act ion s> 


</EventTrigger> 




</Canvas . Triggers> 





Une horloge est egalement caracterisee par une aiguille pour les heures, les minutes et les 
secondes. Les animations pour ces elements sont creees dans le storyboard : 

<!-- Hour hand --> 

<Path Data="M -4, 16 1 3 40 3 0 2 -40 z" 

Fill="white"> 
<Path . RenderTransf orm> 
<Transf ormGroup> 

<RotateTransf orm x : Name="hourHandTransf orm" 

Angle="180"/> 
<TranslateTransf orm X="150.5" Y="145"/> 
</Transf ormGroup> 
</Path. RenderTransf orm> 
</Path> 

<! — Minute hand — > 

<Path Data="M -4, 16 1 3 70 3 0 2 -70 z" 

Fill="white"> 
<Path . RenderTransf orm> 
<Transf ormGroup> 

<RotateTransf orm x : Name="minuteHandTransf orm" 
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Angle="180"/> 
<TranslateTransf orm X="150.5" Y="145"/> 
</ Trans formGroup> 
</Path . Render Transf orm> 
</Path> 

<!-- Second hand --> 

<Path Data="M -1, 16 1 0 70 2 0 0 -70 z" Fill="red"> 
<Path . RenderTransf orm> 
<Transf ormGroup> 

<RotateTransf orm x : Name="secondHandTransf orm" 

Angle="180"/> 
<TranslateTransf orm X="150.5" Y="145"/> 
</ Transf ormGroup> 
</ Path . RenderTransf orm> 
</Path> 

Ensuite, il faut donner un decor a notre horloge (la face, une petite ombre, etc.) 
<!-- Drop shadow --> 

<Path Data="M 157, 5 a 150,150 0 1,0 1,0 z"> 
<Path. Fill> 

<SolidColorBrush Color="Black" Opacity="0 . 3"/> 
</Path. Fill> 
</Path> 

<! — Clock bezel --> 

<Path Data="M 150, 0 a 150,150 0 1,0 1,0 z" Fill="black" /> 
<Path Data="M 150, 1 a 149,149 0 1,0 1,0 z" > 
<Path. Fill> 

<LinearGradientBrush> 

<LinearGradientBrush . GradientStops> 
<GradientStopCollection> 

<GradientStop Color="silver" Of f set=" 0 . 05 "/> 
<GradientStop Color="#333333" Of f set="0 . 95"/> 
</GradientStopCollection> 
</LinearGradientBrush . Gradients top s> 
</LinearGradientBrush> 
</Path. Fill> 
</Path> 

<Path Data="M 150, 15 a 135,135 0 1,0 1,0 z" 

Fill="black" Opacity="l"/> 
<Path Data="M 150, 16 a 134,134 0 1,0 1,0 z" 

Opacity="l"> 
<Path. Fill> 

<LinearGradientBrush> 

<LinearGradientBrush . GradientStops> 
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<GradientStopCollection> 




<GradientStop Color="#333333" Offset="0 


.05"/> 


<GradientStop Color="silver " Offset="0. 


95"/> 


</ GradientStopCollection> 




</LinearGradientBrush . GradientStops> 




</LinearGradientBrush> 




</Path. Fill> 




</Path> 




<! — Clock face — > 




<Path Data="M 150, 23 a 127,127 0 1,0 1,0 z" 




Fill="black" Opacity="l"/> 





II ne reste plus qu'a ajouter un peu de code Python, qui ira chercher la date actuelle et 
placer les aiguilles en consequence : 

from System . Windows import Application 
from System. Windows . Controls import Canvas 
from datetime import datetime 



class Clock: 

def init (self): 

self. scene = Application . Current . LoadRootVisual (Canvas () , "app.xaml") 

def fromAngle (self , time, divisor = 5, offset = 0) : 

return ((time / (12.0 * divisor)) * 360) + offset + 180 

def toAngle (self , time) : 

return self . fromAngle (time) + 360 

def start (self) : 
d = datetime . now ( ) 

self . scene . hourAnimation . From 

d. minute/2) 
self . scene . hourAnimation . To 
self. scene. minuteAnimation . From 
self . scene . minuteAnimation . To 
self . scene . secondAnimation . From 
self . scene . secondAnimation . To 

Clock () . start () 

L'horloge est terminee et fonctionnelle. 



= self . fromAngle (d. hour , 1, 

= self . toAngle (d. hour ) 
= self . fromAngle (d .minute) 

= self . toAngle (d. minute ) 
= self . fromAngle (d . second) 

= self . toAngle (d. second) 



236 



Silverlight et les langages dynamiques 



Silverlight et IronRuby 

Ruby fait egalement partie des langages que supporte la DLR. II est tres apprecie de la 
communaute des developpeurs pour sa facilite et les nombreux paradigmes qu'il permet 
de developper (fonctionnel, objet, etc.). 

Pour la creation d'une application Ruby et Silverlight, c'est le meme principe que pour 
Pyhton (IronPythori) : 

> script/sl ruby testRubyApp 

Seule difference, il y a trois fichiers au niveau du dossier app. Le fonctionnement est 
pourtant le meme. Le troisieme fichier ajoute (Silverlight.rb) est une classe 
(Si 1 verl ightAppl i cation) qui permet d'etablir la liaison avec le fichier XAML : 

include System: :Windows 

include System: :Windows: :Controls 

include System: :Windows : :Media 

class SilverlightApplication 
def application 

Application . current 
end 

def self . usexaml (options = {}) 

options = { : type => UserControl, :name => "app" }. merge (options ) 
Application . current . load root visual (options [: type] . new, 
"#{ options [: name] }. xaml " ) 

end 

def root 

application . root visual 
end 

def method_missing (m) 

root . send (m) 
end 
end 

class FrameworkElement 

def method_missing (m) 

find name (m. to s.to clr string) 

end 
end 
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Cette classe sera toujours la meme et vous ne devrez probablement jamais rien changer 
a l'interieur. Le plus important se trouve dans le fichier app.rb. 

Une horloge en IronRuby et Silverlight 

II est assez facile d'imaginer que le code XAML ne changera pas par rapport a 
1' application avec IronPyhton. Nous n'allons done pas tout ressaisir ici. 

La seule chose qui change, e'est le code attache au XAML. 

Nous devons determiner l'heure actuelle et placer les aiguilles au bon endroit : 



require 'Silverlight' 




class Clock < SilverlightApplication 


use xaml :type => Canvas 




def start 




d = Time. now 




root. hour animation . from 


= from angle d.hour, 1, d. minute/2 


root. hour animation. to 


= to angle d.hour 


root. minute animation . from 


= from angle d. minute 


root. minute animation. to 


= to angle d. minute 


root. second animation . from 


= from angle d. second 


root. second animation. to 


= to angle d. second 


end 




def from angle (time, divisor 


= 5, offset = 0) 


((time / (12.0 * divisor)) 


* 360) + offset + 180 


end 




def to angle (time) 




from angle (time) + 360 




end 




end 




Clock . new .start 





L' application est terminee. 
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Fig. 7.1 : 

Notre application 



Check-list 

Nous avons etudie dans cette annexe : 

Siverlight et les langages dynamiques ; 

IronPyhton ; 

IronRuby. 

7.2 Introduction au C# 

Le C# est un langage de programmation a typage fort et oriente objet. 
Cela sous-entend : 

Typage fort. Chaque variable doit etre definie et respecte le type de sa definition. Une 
variable declaree comme nombre entier restera un nombre entier tout au long de sa 
portee et ne pourra utiliser que les methodes soit appartenant au type nombre entier 
soit utilisant le type nombre entier. 

Oriente objet. II est possible de definir de nouveaux types nommes classes. Une 
classe est une structure de donnees pouvant contenir des fonctions. 

II existe done deux sortes de types en C#, les types primitifs (nombre entier, nombre reel, 
chaine de caracteres, etc.) et les types de classe. 

Une variable instanciee comme etant de type classe porte le nom d' objet. 
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Declaration d'une variable de type primitif 

Pour declarer une variable de type primitif, il suffit d'en ecrire son type suivi de son nom 
et eventuellement sa valeur initiale. Chaque ligne de code suivante est une declaration de 
variable valable : 



int nombre ; 

string teXte ; 

int nombre2 = 4 ; 

double nombreReel = 3.4 ; 

string TexTePasVide = " TextePasVide " ; 

Un type primitif commence toujours par une minuscule. Si vous rencontrez un type 
commencant par une majuscule, c'est qu'il s'agit d'un type de classe. 



Le nom des variables : 

Commence par une lettre ou un caractere de soulignement. 
Indique clairement son contenu. 

Peut contenir invariablement des minuscules, majuscules, des chiffres et des 
caracteres de soulignement. Attention, le C# considere comme differentes deux 
variables du meme nom dont seule la case change. (VaRiablel et Variablel ne sont 
pas les memes variables.) 

La convention de choix du nom de variable la plus courante est le CamelCase du nom 
anglais des chameaux. Tels les bosses d'un chameau, chaque nouveau mot dans le nom 
d'une variable commence par une majuscule. 

Cette convention simplifie grandement la lecture. 

Comparez a votre guise ces deux versions du meme nom : 

1 avari abl equi vameservi rdansl aboucl edemonappl i cati onpourcal cul erl atvasurmonsal ai re ; 
LaVari abl eQui VaMeServi rDansLaBoucl eDeMonAppl i cati onPourCal cul erLaTvaSurMonSal ai re. 

II est evident qu'un nom de variable si long est aberrant et ne se retrouvera jamais dans 
un programme. 



Declaration de variables de type primitif 
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Declaration d'une variable de type de classe 

Le mot-cle new suivi du nom d'une classe permet de declarer une nouvelle variable de 
type de classe. 

De nombreuses classes sont fournies par la plateforme C#. 
Les declarations de classes suivantes sont correctes : 



declaration de variable de Type de classe 

Int32 nombre = new Int32(); 
String s = new String (); 
String ChaineVide; 

Attention, dans le cas de la variable de nom ChaineVide, seule la declaration du nom de 
la variable a ete assignee, mais aucune zone memoire n'a ete allouee via le mot-cle new. 

On dit de la variable ChaineVide qu'elle est null. 

Fonctionnement par reference des types de classe 

Les variables de type de classe ne designent pas uniquement une zone memoire dans 
laquelle vous pouvez enregistrer des donnees. 

II s'agit de pointeur. Un nom de variable pointe une zone memoire initialisee par le 
mot-cle new. 

II est done possible de changer la zone memoire que pointe un nom de variable. 

Ainsi dans le code qui suit, nombre 1 va d'abord pointer la zone memoire definie en ligne 
1. Une fois a la ligne 3, nombrel pointera la zone memoire definie en ligne 2, comme 
nombre2 : 

Zone memoire et nom de variables 



1 


Int32 nombrel = new 


Int32() ; 


2 


Int32 nombre2 = new 


Int32() ; 


3 


nombrel = nombre2 ; 





Ce qui est vrai pour les types de classe ne Test pas pour les types primitifs. Un type 
primitif represente directement sa zone memoire. Le meme exemple en type primitif 
reviendrait a copier le contenu de la zone memoire de nombre2 dans la zone memoire de 
nombrel. 

Revenons a nos types de classe. Qu'est-il advenu de la zone memoire definie en ligne 1 ? 
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La reponse est simple : elle n'existe plus. Lorsqu'une zone memoire n'est plus pointee 
par aucun nom de variable, cette zone memoire est recyclee par le ramasseur de poubelle 
de la plateforme .NET. 

Portee des variables 

La portee de vie d'une variable est limitee par les accolades qui entourent le bloc de code 
dans laquelle elle a ete declaree : 

Portee des variables 



1 { 

2 int nombrel = 3 ; 

3 String chaine = new String () ; 

4 { 

5 String chaine = new String () ; 

6 int nombre2 = 4 + nombrel; 

7 } 

8 { 

9 int nombre2 = 5; 

10 } 

11 } 



Dans cet exemple : 

La variable nombrel est accessible de la ligne 2 a la ligne 10. 
La variable chaTne definie en ligne 3 est accessible : 

a la ligne 3 ; 

de la ligne 7 a la ligne 10. 

En effet, la variable chaine declaree en ligne 5, dans un autre bloc de code, prevaut dans 
son bloc sur la variable chaTne declaree en ligne 3. 

Cependant, en ligne 5, il est possible d'utiliser la variable nombrel definie en ligne 2, car 
aucune autre variable du nom nombrel n'a ete definie dans le blog de la ligne 4 a la 
ligne 7. 

De la meme facon, les variables nombre2 en ligne 6 et nombre2 en ligne 9 sont deux 
variables differentes. 

Chaque variable est recyclee par le ramasseur de poubelle a la fin de son bloc ; la variable 
nombre2 de la ligne 6 cesse done d'exister en ligne 7. 
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Utilisation des proprietes de classe 

Les classes definissent des objets pouvant contenir une multitude de donnees. 

Par exemple, la classe Point definit un objet contenant un double X et un double Y. 

Pour acceder a ces sous-variables, nominees proprietes, il suffit de faire suivre le nom 
de la variable d'un point et du nom de la propriete : 

acces aux proprietes de classe 



Point 


P 


= new Point ( ) ; 


p.X = 


3 


0 ; 


p.Y = 


4 


0; 



Utilisation des methodes de classe 

Une methode est une fonction remplissant un certain usage. Les classes definissent des 
objets pouvant contenir des donnees mais aussi des methodes. 

Executer la methode d'un objet s'effectue en faisant suivre le nom de cet objet par un 
point, le nom de la methode et deux parentheses, une ouvrante et une fermante : 

acces aux methodes de classe 

Int32 nombre = new Int32() ; 
String s = nombre . ToString ( ) ; 

Dans cet exemple, la methode ToString de la variable nombre est appelee. Cette methode 
convertit la variable en une chaine de caracteres qui sera ensuite assignee a la variable s. 

Structure d'un programme C# (Partie 1 ) 

Un programme C# debute toujours par l'importation des librairies necessaires a 
l'execution de ce programme. 

II y a toujours des librairies necessaires. Par exemple, il serait difficile de se passer de la 
librairie System contenant les types primitifs. 

Le mot-cle permettant l'importation d'une librairie est using ; il est suivi du nom de la 
librairie voulue. 
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Exemple de using 

using Sytem; 
using Sytem. Net; 

Ce qui suit est un namespace. Un namespace ou espace de noms est une sorte d'enclos 
definissant une famille. Si dans la famille Boigelot, le nom de Simon signifie un des 
auteurs de ce Livre, dans la famille Bible, Simon definit un apotre. 

II en va de meme pour les espaces de noms. 

Ensuite vient une definition de classe car en C#, tout est objet. 

Definir un type de classe 

L'avantage reel de la programmation orientee objet n'apparait que lorsque Ton commence 
a definir nos propres classes. 

Pour rappel, une classe est la definition d'une structure contenant des proprietes et des 
methodes. Cette classe sera instanciee par le mot-cle new pour creer des objets (zone 
memoire) pointes par des noms de variables. 

Dans 1' autre sens, les noms de variables sont des pointeurs de zone memoire (objets) 
respectant une definition contenue dans leur type de classe. 

Creer une nouvelle classe se fait grace au mot-cle cl ass. Toute variable definie dans cette 
classe definit en fait une propriete de la classe. 

Si nous desirons creer une classe representant des personnes et ayant comme propriete 
un nom et un age, voici ce que la definition de class donne : 

Definition de la classe Personne (version 1) 

class Personne 
{ 

public string Nom ; 
public int Age ; 

} 
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Le mot-cle publ ic devant chaque propriete signifie qu'on peut acceder a cette propriete 
par l'exterieur de la classe. Ainsi il est possible d'ecrire : 

Declaration d'un objet de classe Personne 

Personne p = new Personne () ; 

p. Nona = " Simon pas moi mais l'apotre "; 

p. age = 2000; 

Definir une nouvelle methode 

Une methode est representee par son nom, son type de retour et ses parametres : 

Son nom doit respecter les memes regies que ceux des variables. 
Son type de retour est le type de resultat de la methode, par exemple pour la methode 
Add additionnant deux nombres entiers, le type de retour sera un nombre entier. 
Ses parametres, pour la meme methode Add, les parametres de la methode seront les 
deux nombres entiers a additionner. 

Cette methode s'ecrit : 



Methode Add 

int Add(int nombrel, int nombre2) 
{ 

return nombrel + nombre2 ; 

} 

Le mot-cle return est suivi du resultat de la methode. En effet, une methode peut etre 
longue et demander de nombreuse lignes de code. Ce mot-cle stipule a la plateforme le 
resultat a retourner. 

Utiliser cette methode s'avere aussi simple mais les types de variables des parametres 
doivent etre respectes sous peine d'obtenir une erreur. 

Utilisation de la methode Add 

int ArgentEnPoche = 5 ; 
int ArgentEnChausette = 1 ; 

int ArgentTotal = Add (ArgentEnPoche, ArgentEnChausette) ; 
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Ajouter une methode d une classe 

Pour ajouter une methode a une classe, il suffit de definir cette methode a l'interieur de 
cette classe. 

Par exemple, nous pouvons ajouter la methode Add a la classe Personne : 

Qjffi Definition de la classe Personne (version 2) 

class Personne 
{ 

public string Norn ; 
public int Age ; 

public int Add(int nombrel, int nombre2) 
{ 

return nombrel + nombre2 ; 

} 

} 

Cette methode est elle aussi precedee du mot-cle publ i c pour y acceder depuis l'exterieur 
de la classe. II est maintenant possible d'ecrire : 

Utilisation d'une methode de classe. 

Personne p = new Personne () ; 
int somme = p . Add (342 , 4 53 ) ; 

Structure d'un programme C# (Partie 2) 

Pour en revenir a la structure d'un programme, nous avions vu les using, le namespace 
et nous etions bloques sur la definition d'une classe. 

Dans cette annexe, nous nous contenterons de creer des programmes s'executant dans une 
console dos. 

La classe de base d'un programme s'executant dans une console dos est simplement la 
class Program. 

Son code est : 

Code d'une application dos 

using System; 

using System. Collections. Generic, • 
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using System. Linq; 
using System. Text; 

namespace AnnexeConsoleApplication 
{ 

class Program 
{ 

static void Main ( string [ ] args) 

{ 

} 

} 

} 

La classe Program contient une methode de base, cette methode est la methode Mai n, c'est 
elle qui sera appelee par la plateforme au demarrage du programme. 

Elle est precedee du mot-cle static. Ce dernier stipule que cette methode n'est definie 
qu'une fois a travers toutes les variables. 

II est possible d'acceder aux methodes et proprietes static sans initialiser de variable. 
Cela se fait en ecrivant le nom de la classe suivi d'un point et du nom de la propriete ou 
de la methode. 

Ainsi, le code de la plateforme executant tout programme console est : 

code de la plateforme executant tout programme console 

Program .Main (parametes ) ; 

Exemple d'une application de gestion de donnees 

Nous allons ecrire pas a pas une application de gestion de donnees en mode Console. 
Notre premiere tache consiste a creer 1' application elle-meme : 

Application de Gestion de donnees vide 

using System; 

using System. Collections. Generic; 
using System. Linq; 
using System. Text; 

namespace GestionDeDonnees 
{ 

class Program 
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{ 

static void Main ( string [ ] args) 

{ 

} 

} 

} 

Nous devons ensuite definir les donnees que nous allons gerer. Un bon exemple serait de 
gerer une bibliotheque. 

Les differentes classes que nous retrouvons dans une application de gestion de 
bibliotheques sont : 

la bibliotheque elle-meme ; 
des livres ; 
des clients. 

Les differentes actions se deroulant dans une bibliotheque sont : 

Un client emprunte un livre pour une certaine duree et paie un certain prix. 
Un client rapporte un livre. 

Comme il faut bien commencer, defmissons la classe Li vre : 

Livre. cs 

using System; 

using System. Collections. Generic; 
using System. Linq; 
using System. Text; 

namespace GestionDeDonnees 
{ 

public class Livre 
{ 

public string Titre; 
public string Auteur; 
public DateTime Echeance; 
public int NombreDePage; 
public int Prix; 

} 

} 

Rien que nous n'ayons vu jusqu'a present. Passons a la classe Bibliotheque : 
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Les listes generiques 

Bibliotheque.es 

using System; 

using System. Collections. Generic; 
using System. Linq; 
using System. Text; 

namespace GestionDeDonnees 
{ 

public class Bibliotheque 
{ 

public List<Livre> LivreEnMagasin = 

new List<Livre> ( ) ; 
public List<Client> Clientelle = 

new List<Client> ( ) ; 

} 

} 

Dans ce cas, la liste attire sans doute votre regard. 

En C#, il est possible de declarer une propriete comme etant une liste d'objets. Cette liste 
n'a pas de taille. 

Pour y ajouter un objet, il suffit d'en appeler la methode Add (Ob jet o). 
Ainsi pour ajouter un Livre a la liste LivreEnMagasin, vous utiliserez le code : 

*fc Liste.Add 

Livre MonLivre = new Livre ( ) ; 
Bibliotheque . LivreEnMagasin .Add (MonLivre) ; 

Pour atteindre un livre dans une liste, on peut utiliser son i ndex, sa position dans la liste : 

Utilisation des index dans une liste 

Livre MonLivre = Bibliotheque . LivreEnMagasin [ 4 ] 

Retirer un livre de la liste se fait grace a la methode Remove : 

J^jt Utilisation de List Remove 

Livre .MonLive = Bibliotheque . LivreEnMagasin [ 4 ] 
Bibliotheque . LivreEnMagasin . Remove (MonLivre) 
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Ce code donnera le meme resultat avec la methode RemoveAt(Positon) : 



Utilisation de List.RemoveAt 

Bibliotheque . LivreEnMagasin . RemoveAt ( 4 ) ; 

II en va de meme pour la classe CI ient : 

J^jt Client. cs 

using System; 

using System. Collections. Generic; 
using System. Linq; 
using System. Text; 

namespace GestionDeDonnees 
{ 

public class Client 
{ 

public string Norn; 

public List<Livre> LivesEnEmprunt = 
new List<Livre> ( ) ; 

} 

} 

Creation des methode Emprunte et Rend 

Exemple d'utilisation des differentes classesExemple d'utilisation des differentes classes 

using System; 

using System. Collections. Generic ; 
using System. Linq; 
using System. Text; 

namespace GestionDeDonnees 
{ 

class Program 
{ 

private Bibliotheque bibli = new Bibliotheque () ; 

static void Main ( string [ ] args) 
{ 

} 



310 



Webographie 



public void Emprunte (Client client, Livre livre) 
{ 

bibli . LivreEnMagasin . Remove (livre) ; 
client . LivesEnEmprunt .Add (livre) ; 

} 

public void Rend (Client client, Livre livre) 
{ 

client . LivesEnEmprunt . Remove (livre) ; 
bibli . LivreEnMagasin . Add (livre) ; 

} 



} 

} 

Conclusion 

Le C# est un langage tres structurant. Dans les nombreuses librairies offertes par la 
plateforme .NET se trouvent par milliers des definitions de classe, les proprietes et leurs 



Ces methodes, empilees couches sur couches, ont ajoute une couche d' abstraction par 
rapport au langage machine et aux autres langages de premiere et deuxieme generation. 

Des methodes telles que Mai 1 . Send (Emai 1 mail) ou monPl ayerVideo. PI ayVideo 
(maVideo) forment la nourriture journaliere du developpeur C#. 

Check-list 

Dans cette annexe, nous avons appris les rudiments de la programmation C#, et travers 
elle, les rudiments de la programmation orientee objet. 

Nous esperons que cette annexe aidera celles et ceux d'entre vous qui debutent plein de 
courage dans ce monde merveilleux de la programmation. 

Mais n'oubliez jamais qu'Internet est votre ami. De nombreux tutoriaux sont disponibles 
sur le sujet pour toutes personnes desireuses d'en apprendre plus. 



Ce livre n'aura pas fait de vous un expert. Vous possedez toutes les bases necessaires pour 
creer de tres bonnes applications Silverlight. Mais malheureusement, de Silverlight 
decoule un grand nombre d' autres technologies que nous n' avons pas pu aborder en detail 



methodes. 



7.3 
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dans cet ouvrage. C'est pour cela que nous allons vous fournir une serie de liens sur 
differents sujets arm que vous puissiez approfondir vos connaissances. 

Visual Studio 2008 

Pour respecter l'ordre du livre mais surtout l'ordre logique des choses, il vous faut 
maitriser l'outil qui permet la realisation d' applications Silverlight. En effet, nous n'avons 
pas pris le temps d'expliquer a chaque fois la creation de tel ou tel autre fichier, par 
manque de place. 

Vous devez apprendre a maitriser l'outil. 
Sources officielles 

Le site de Microsoft qui permet d'obtenir toute l'information sur Visual Studio : 
http://www.rnicrosoft.com/france/nisdn/vstudio/default.nispx 

Une serie de videos que vous pouvez regarder. Quelques-unes presentent Visual Studio 
2010 qui sera le prochain Visual Studio : 

http://msdn.microsoft.com/fr-fr/vstudio/msdn.5minutes.pour.comprendre.visualstudio.aspx 

Le site de la version gratuite de Visual Studio : 
http://www.microsoft.com/Express/ 

Le portail des developpeurs dedie a Visual Studio. Decouvrez-y tout ce que voulez savoir 
sur Visual Studio 2008 : 

http://msdn.microsoft.com/en-us/vstudio/default.aspx 
Silverlight 

Silverlight est le sujet de ce livre. Nous avons aborde de nombreux themes mais peut-etre 
reste-t-il des pistes a explorer. Dans tous les cas, il est interessant de se tenir informe pour 
un eventuel Silverlight 3 ou la sortie de Silverlight pour application mobile 

Sources officielles 

Le site officiel de Silverlight. Vous y trouverez des actualites, des demonstrations, etc. A 
visiter quotidiennement : 

http://silverlight.net/ 
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Le site officiel de Silverlight pour les developpeurs : 
http://msdn.microsoft.com/fr-fr/silverlight/default.aspx 

Communautes 

Pour vous tenir informer des dernieres nouveautes de Silverlight en francais : 
http://www.silverlight-info.fr/ 

Le blog de Guillaume, un blogueur a suivre sur le sujet Silverlight et RIA : 
http://blogs.codes-sources.com/guillaume/default.aspx 

Le blog de Christophe Lauer est un bon blog pour se tenir informe sur l'actualite autour 
de Microsoft, dont celle de Silverlight : 

http://blogs.msdn.com/clauer/default.aspx 

Le blog de Scott Guthrie est un incontournable pour ceux qui voudraient etre au courant 
de tout a la premiere minute. Des exemples complets sur les dernieres technologies : 

http://weblogs.asp.net/scottgu/archive/2007/05/07/silverlight.aspx 

Le blog de Jesse Liberty est un blog sur un fan de Silverlight : 
http://silverlight.net/blogs/jesseliberty/ 

On ne saurait les lister tous tellement il y a d'information. Utilisez Google pour davantage 
de liens. 

Le Framework .NET 

Voici la derniere et plus grande partie a explorer. Le Framework .NET est un ensemble 
de technologies qui permettent aussi bien de creer des applications Silverlight, que web 
ou encore mobile en passant par des applications Desktop. 

Un tres grand nombre de produits gravitent autour de cette technologie qui ne cesse de 
s'ameliorer d'annee en annee. 

Sources officielles 

Source officielle de Framework .NET de Microsoft : 
http://www.microsoft.com/NET/ 
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La communaute officielle des developpeurs utilisant les technologies .NET : 
http://www.msdn.com 

Communautes 

Tres importante communaute autour du .NET. Vous y decouvrirez un forum, de l'actualite 
et un grand nombre d' articles : 

http://dotnet.developpez.com/ 

Codes-Sources est la communaute par defaut ou tous les developpeurs .NET se 
rencontrent. Ce site repertorie les derniers postes de blog de la communaute : 

http://blogs.codes-sources.com/ 

Comme son nom l'indique, vous trouverez enormement de code a telecharger sur ce site : 
http://www.codes-sources.com 

Le blog de Loi'c Bar sur toutes les technologies Microsoft : 
http://blogs.codes-sources.com/loicbar/ 

Le blog de Simon Boigelot. Le laboratoire d'un vrai developpeur : 
http://www.simonboigelot.com/ 

Voila qui nous a permis de faire le tour des sites avec lesquels il faut entretenir un contact. 
Bien entendu, au fur et a mesure de vos visites, vous en decouvrirez d'autres. 
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ActualHeight 243 

ActualWith 243 

ADO.NET 143 

Adobe 98 

Animations 88 

Apache 184 

ASMX 135 

Asp 

TreeView 195 

ASP.NET 97, 182 

Membership Provider 197 

Assembly 225 

Auto 33 

AutoGeneratedColumn 253, 256, 264 

AutoRe verse 82 

B 

Background 74 

Beginlnvoke 242 

BeginTime 82 

Binding 55 

Border 33 

BorderColor 74 

Brush 73 

Brushes 73 

C 

Calendar 247, 249 

CallBack 146 

Canvas 31 
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CellEditingTemplate 264 

Center 77 

CheckBox 42-43 

Checked 43 a 45 

Clic 39, 54 

CodePlex 269 

Collapsed 244 

ColumnDefinition 28 

ComboBox 49 

ComboBoxItem 49 

Compare Validator 193 

Content 40, 45 

ContentPresenter 224 

ControlTemplate 222-223 

Convert 67 

ConvertBack 67 

CornerRadius 35 

CustomValidator 193 
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Data 230 

DataBinding 55, 214, 217 

DataContext 148, 216-217, 235 

DataGrid 253, 255, 264 

DataGridCheckBoxColumn 255, 257 

DataGridTemplateColumn 255, 257 

DataGridTextColumn 255 

DataReader 119 

DataTemplate 255 

DataTemplates 61 

DatePicker 249, 263 

DateTime 249 

Decade 248 

Deepzoom 273-274 



317 



INDEX 



Default.aspx 184 

Default.aspx.es 184 

Degrade 76 

DELETE 116 

DependencyProperties 228 

Disabled 33 

Dispatcher 242 

DisplayDate 248-249 

DisplayDateEnd 248-249 

DisplayDateStart 248-249 

DisplayMode 248 

Document 24 

DOM 210 

DoubleAnimationUsingKeyFrame 82 

Duration 82 

DynamicResource 65 

E 

Element 24 

EndPoint 76 

Evenements 38 

Expression 

Blend 97 

Design 99 

Encoder 2 102 

Media 2 98 

Studio 98 

Web 97 

F 

Flash/Flex 107 

Foreground 74 
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Forever 82 

Form 185 

FROM 116 

FullScreen 243 

FullScreenChanged 243 

G 

GenericXAML 72 

GradientOrigin 77 

Gradients 73 

Grid 26 

GridSplitter 251 

GridView 188, 193 

GroupName 45 

H 

Hackers 117 

Hidden 33 
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